Khóa học IT CSS Cơ bản 031_Bố cục lưới Grid - Ghi chú kỹ thuật của zhaoJian

Bố cục lưới Grid

Lưới là một chế độ bố cục bao gồm một loạt các đường ngang và dọc. Với lưới, chúng ta có thể sắp xếp các phần tử thiết kế, giúp chúng ta thiết kế các trang có các phần tử với vị trí và chiều rộng cố định, làm cho các trang web của chúng ta thống nhất hơn.

Một lưới thường có nhiều cột (column) và hàng (row), cũng như các khoảng cách giữa các hàng và cột, khoảng cách này thường được gọi là gutter.

Hiệu ứng ví dụ

Khái niệm cơ bản

Bố cục Grid bao gồm các khái niệm cơ bản sau:

Container lưới (grid container): Bố cục lưới bao gồm container lưới và item lưới. Container lưới là container đặt các item lưới vào lưới. Container lưới có thể là bất kỳ phần tử nào, nhưng thường sử dụng phần tử div.
Item lưới (grid item): Item lưới là các phần tử được đặt trong container lưới. Item lưới có thể là bất kỳ phần tử nào, nhưng thường sử dụng phần tử div.
Đường lưới (grid line): Đường lưới là các đường chia container lưới thành các hàng và cột. Đường lưới có thể là đường ngang hoặc dọc.
Cột lưới (grid column): Cột lưới là các đường dọc trong container lưới.
Hàng lưới (grid row): Hàng lưới là các đường ngang trong container lưới.

Các thuộc tính thường dùng

Thuộc tính Container lưới

Container lưới có các thuộc tính sau để kiểm soát bố cục lưới:

display: Đặt chế độ hiển thị của container lưới. Container lưới phải được đặt thành display: grid hoặc display: inline-grid để sử dụng bố cục lưới.
grid-template-columns: Đặt số cột và chiều rộng cột của container lưới (sử dụng đơn vị fr, px, em, v.v.).
grid-template-rows: Đặt số hàng và chiều cao hàng của container lưới (sử dụng đơn vị fr, px, em, v.v.).
grid-template: Đặt đồng thời grid-template-columns và grid-template-rows.
grid-auto-columns: Đặt chiều rộng cột của container lưới.
grid-auto-rows: Đặt chiều cao hàng của container lưới.

Thuộc tính Item lưới

Item lưới có các thuộc tính sau để kiểm soát bố cục của item lưới trong lưới:

grid-column: Đặt cột của item lưới.
grid-row: Đặt hàng của item lưới.
grid-column-start: Đặt vị trí bắt đầu của item lưới trong cột.
grid-column-end: Đặt vị trí kết thúc của item lưới trong cột.
grid-row-start: Đặt vị trí bắt đầu của item lưới trong hàng.
grid-row-end: Đặt vị trí kết thúc của item lưới trong hàng.
grid-area: Đặt vùng của item lưới.
grid-gap: Đặt khoảng cách giữa các đường lưới.

Bố cục lưới

Định nghĩa chiều rộng cột và chiều cao hàng cố định và tự thích ứng

Ví dụ:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* Cột đầu tiên 100px, cột thứ hai 200px, không gian còn lại phân bổ cho cột tự thích ứng */
5
    grid-template-rows: 100px 200px auto;
6
    /* Hàng đầu tiên 100px, hàng thứ hai 200px, không gian còn lại phân bổ cho hàng tự thích ứng */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
        <div class="item">Demo Grid</div>
9
        <div class="item">Demo Grid</div>
10
        <div class="item">Demo Grid</div>
11
    </div>

Hiệu ứng:

Hiệu ứng ví dụ Sử dụng phần trăm để định nghĩa chiều rộng cột, chiều cao hàng

Ví dụ:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* Cột đầu tiên chiếm 30%, cột thứ hai chiếm hai phần không gian còn lại, cột thứ ba chiếm một phần không gian còn lại */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* Hàng đầu tiên chiếm 30%, hàng thứ hai chiếm hai phần không gian còn lại, hàng thứ ba chiếm một phần không gian còn lại */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
        <div class="item">Demo Grid</div>
9
        <div class="item">Demo Grid</div>
10
        <div class="item">Demo Grid</div>
11
    </div>

Hiệu ứng:

Hiệu ứng ví dụ Chia đều (phân bổ đều) chiều rộng cột, chiều cao hàng

Ví dụ:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Ba cột bằng nhau, mỗi cột chiếm một phần không gian còn lại */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* Ba hàng bằng nhau, mỗi hàng chiếm một phần không gian còn lại */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
        <div class="item">Demo Grid</div>
9
        <div class="item">Demo Grid</div>
10
        <div class="item">Demo Grid</div>
11
    </div>

Hiệu ứng:

Hiệu ứng ví dụ Sử dụng minmax để định nghĩa chiều rộng/cao tối thiểu và tối đa cho cột, hàng

Ví dụ:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* Cột đầu tiên chiều rộng tối thiểu 100px, chiếm một phần không gian còn lại; cột thứ hai chiều rộng tối thiểu 200px, chiếm hai phần không gian còn lại */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* Hàng đầu tiên chiều cao tối thiểu 100px, chiếm một phần không gian còn lại; hàng thứ hai chiều cao tối thiểu 200px, chiếm hai phần không gian còn lại */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
    </div>

Hiệu ứng:

Hiệu ứng ví dụ

Khoảng cách lưới

Khoảng cách lưới được kiểm soát bởi hai thuộc tính: grid-row-gap và grid-column-gap. Ngoài ra, CSS Grid Level 2 đã giới thiệu thuộc tính gap, có thể kiểm soát cả grid-row-gap và grid-column-gap cùng lúc.

Ví dụ:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* Khoảng cách hàng là 50px */
6
    grid-column-gap: 30px; /* Khoảng cách cột là 30px */
7
    /* gap: 50px 30px; Khoảng cách hàng là 50px, khoảng cách cột là 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
    </div>

Hiệu ứng:

Hiệu ứng ví dụ

Định vị lưới

Định vị lưới thường đề cập đến việc sử dụng các thuộc tính grid-column, grid-row và grid-area để định vị các item trong bố cục lưới. Các thuộc tính này được sử dụng để chỉ định các cột và hàng mà item chiếm trong lưới, hoặc trực tiếp chỉ định vùng mà item nằm.

grid-column là thuộc tính được sử dụng để đặt các cột mà item lưới trải dài. Đây là viết tắt của grid-column-start và grid-column-end. Với grid-column, bạn có thể định nghĩa vị trí và số cột mà item lưới trải dài theo chiều ngang thuận tiện hơn.
grid-row là thuộc tính được sử dụng để đặt các hàng mà item lưới trải dài. Đây là viết tắt của grid-row-start và grid-row-end. Với grid-row, bạn có thể định nghĩa vị trí và số hàng mà item lưới trải dài theo chiều dọc thuận tiện hơn.
Thuộc tính grid-area là thuộc tính viết tắt để đặt đồng thời grid-row-start, grid-column-start, grid-row-end và grid-column-end. Với grid-area, bạn có thể định nghĩa vị trí và kích thước của item lưới trong bố cục lưới một cách trực quan hơn.

Ví dụ:

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Định nghĩa 3 cột, mỗi cột chiếm 1 phần không gian */
5
    grid-template-rows: repeat(2, 150px);
6
    /* Định nghĩa 2 hàng, mỗi hàng cao 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* Định vị sử dụng grid-column và grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* Từ cột 1 đến cột 3 (cột 1+2) */
19
    grid-row: 1 / 2;    /* Từ hàng 1 đến hàng 2 (hàng 1) */
20
}
21
/* Định vị sử dụng grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* Từ hàng 2 cột 2 đến hàng 3 cột 4 (hàng 2)(cột 2+3) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

Hiệu ứng:

Hiệu ứng ví dụ

Ví dụ:

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* Định nghĩa hai cột, cột đầu tiên chiếm một phần, cột thứ hai chiếm hai phần */
10
    grid-template-rows: auto;
11
    /* Định nghĩa chiều cao hàng, hàng đầu tiên và thứ ba chiều cao được xác định bởi nội dung, hàng thứ hai chiếm không gian còn lại */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* Định nghĩa bố cục vùng, mỗi vùng được biểu thị bằng một chuỗi, dấu cách phân tách các ô, xuống dòng biểu thị hàng mới */
17
    min-height: 100vh;
18
    /* Đặt chiều cao tối thiểu để đảm bảo footer có thể nhìn thấy khi chiều cao nội dung nhỏ hơn viewport */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* Đặt .header vào vùng có tên "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* Đặt .sidebar vào vùng có tên "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* Đặt .main vào vùng có tên "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* Đặt .footer vào vùng có tên "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

Hiệu ứng:

Hiệu ứng ví dụ

Bố cục lưới Grid

Khái niệm cơ bản

Các thuộc tính thường dùng

Bố cục lưới

Khoảng cách lưới

Định vị lưới

Bình luận