Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến bố cục lưới

Các thuộc tính CSS liên quan đến bố cục lưới

Bài viết này giải thích các thuộc tính CSS liên quan đến bố cục lưới.

Bạn có thể học cách mô tả lưới và lưới nội tuyến.

YouTube Video

HTML để Xem trước

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Bố cục lưới

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Lưới là một hệ thống bố cục để căn chỉnh các phần tử theo hàng và cột hai chiều. Sử dụng lưới, bạn có thể dễ dàng và linh hoạt xây dựng các bố cục phức tạp mà trước đây khó thực hiện với các phương pháp float hoặc position truyền thống. Trong khi flexbox vượt trội ở các bố cục một chiều, thì lưới phù hợp với các bố cục hai chiều.

  • Lớp grid-box áp dụng bố cục lưới bằng cách chỉ định grid trong thuộc tính display. Phần tử này được gọi là hộp chứa lưới.
  • Thuộc tính grid-template-columns xác định độ rộng của các cột lưới. Trong ví dụ này, cột đầu tiên là 100px, cột thứ hai là 200px, và cột thứ ba chiếm không gian còn lại (auto).
  • Thuộc tính grid-template-rows xác định chiều cao của các hàng lưới. Hàng đầu tiên là 100px, hàng thứ hai là tự động (auto), và hàng thứ ba cao 50px.
  • Thuộc tính gap đặt khoảng cách giữa các mục lưới. Thêm khoảng cách 10px giữa các cột và hàng.

Thuật ngữ cơ bản

  1. Hộp chứa lưới là một phần tử với thuộc tính display được đặt là grid, và các phần tử con của nó trở thành các mục lưới.
  2. Các mục lưới là các phần tử con nằm trực tiếp dưới hộp chứa lưới.

Các thuộc tính chính của lưới

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • Thuộc tính grid-template-columns và grid-template-rows xác định kích thước của từng cột và hàng.
  • Các đơn vị như px và %, cũng như fr (phân số) để chỉ định tỷ lệ của không gian còn lại, có thể được sử dụng.
    • Trong ví dụ này, có ba cột, và cột thứ hai có chiều rộng gấp đôi các cột còn lại.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column và grid-row xác định mục lưới sẽ được đặt trong cột hoặc hàng nào.
    • Trong ví dụ này, mục mở rộng từ cột thứ 2 đến cột thứ 4 và từ hàng thứ 1 đến hàng thứ 3.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows và grid-auto-columns là các thuộc tính điều chỉnh kích thước của các hàng và cột được tạo tự động khi các dòng hoặc cột trong bố cục lưới không được xác định rõ.
    • Trong ví dụ này, 2 hàng và 2 cột được xác định rõ ràng, nhưng nếu thêm nhiều phần tử hơn, các hàng hoặc cột mới sẽ được tạo tự động theo các giá trị của grid-auto-rows và grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Căn chỉnh các mục lưới theo chiều ngang (justify-items) và chiều dọc (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area xác định một lần khu vực nào trong vùng chứa lưới mà mục lưới sẽ được đặt vào.
    • Trong ví dụ này, nó có nghĩa là chiếm từ hàng thứ 1 đến hàng thứ 3 và từ cột thứ 2 đến cột thứ 4.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap thêm khoảng trống giữa các cột và hàng. Bạn cũng có thể xác định khoảng cách giữa các cột và hàng riêng lẻ bằng cách sử dụng column-gap và row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow là một thuộc tính thiết lập hướng mà các mục được đặt, theo hàng hoặc theo cột.

Ví dụ về bố cục phức tạp 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

Theo cách này, lưới cho phép bạn tạo bố cục toàn bộ trang web bằng mã đơn giản.

  • Trong ví dụ này, có ba cột (thanh bên, nội dung chính, và quảng cáo) và ba hàng (đầu trang, nội dung, và chân trang).
  • Phần header và footer chiếm toàn bộ chiều rộng của trang, với nội dung ở giữa và sidebar cùng quảng cáo ở hai bên.

Ưu điểm của Grid

Ưu điểm của grid bao gồm các điểm sau:.

  • Bố cục hai chiều dễ dàng: Quản lý bố cục trong cả hàng và cột giúp tạo ra các bố cục phức tạp chỉ với mã tối thiểu.
  • Tương thích với thiết kế đáp ứng: Hệ thống grid giúp dễ dàng tạo các thiết kế đáp ứng phù hợp với các kích thước màn hình khác nhau.

Thuộc tính gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

Thuộc tính gap được sử dụng trong bố cục grid và flexbox để thiết lập khoảng cách (khoảng trống) giữa các phần tử. Bằng cách sử dụng thuộc tính này, bạn có thể dễ dàng định khoảng trống giữa các phần tử con.

  • Trong lớp gap-grid-container, khoảng cách 30px theo chiều dọc và 10px theo chiều ngang được đặt giữa mỗi phần tử. Do một lưới 3 cột được tạo bằng grid-template-columns, các khoảng cách được áp dụng theo chiều dọc và chiều ngang giữa mỗi phần tử. Trong lớp gap-flex-container, khoảng cách 50px được áp dụng giữa ba mục trong flexbox.

Cú pháp Cơ bản 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap xác định khoảng cách giữa các hàng. Đây là khoảng cách theo chiều dọc trong bố cục lưới hoặc flex.
  • column-gap xác định khoảng cách giữa các cột. Đây là khoảng cách theo chiều ngang.

Nếu không chỉ định hai giá trị, một giá trị sẽ được áp dụng cho cả row-gap và column-gap.

Ưu điểm của thuộc tính gap

Các lợi ích của thuộc tính gap bao gồm những điều sau:.

  • Cài đặt khoảng cách đơn giản: Mã để thiết lập khoảng cách giữa các phần tử con trở nên đơn giản hơn, loại bỏ yêu cầu đặt thêm margin hoặc padding giữa các phần tử.
  • Thích nghi linh hoạt: Nó dễ dàng hỗ trợ thiết kế đáp ứng, cho phép điều chỉnh thiết kế linh hoạt.

Thuộc tính grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

Thuộc tính grid-template-areas cung cấp một cách để đặt tên các vùng trong container lưới và sử dụng các tên đó để định vị các phần tử lưới một cách dễ dàng. Việc sử dụng thuộc tính này cho phép định nghĩa bố cục trực quan và dễ hiểu.

Các phần tử được đặt trong các vùng có tên được chỉ định bởi thuộc tính grid-template-areas cần được gán cùng tên với thuộc tính grid-area. Ngay cả khi các phần tử trải dài qua nhiều ô, chúng sẽ được tự động định vị chính xác.

Trong ví dụ này, lưới được tạo như sau:.

  • Trong hàng đầu tiên, "header" được đặt trên hai cột.
  • "Sidebar" được đặt ở bên trái và "content" ở bên phải trong hàng thứ hai.
  • "Footer" được đặt trên hai cột trong hàng thứ ba.

Cách sử dụng cơ bản 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

Trong thuộc tính grid-template-areas, tên của vùng được chỉ định cho mỗi hàng. Bằng cách đặt các phần tử vào các vùng được gán tên, bạn có thể dễ dàng tạo bố cục. - Trong ví dụ này, một lưới với 2 hàng và 3 cột được tạo ra, và mỗi ô được đặt tên là area1, area2, v.v.

Định nghĩa các ô trống bằng . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Nếu bạn muốn có các ô trống trong bố cục của mình, bạn có thể biểu thị các ô trống bằng một . (dấu chấm). - Như trong ví dụ này, bằng cách chỉ định một . giữa sidebar và content, cột thứ hai sẽ trở thành trống.

Lợi ích của thuộc tính grid-template-areas

Lợi ích của thuộc tính grid-template-areas bao gồm các điểm sau.

  • Bố cục trực quan: Nó cho phép bạn biểu thị bố cục một cách trực quan, giúp dễ dàng hiểu thiết kế hơn.
  • Di chuyển phần tử dễ dàng: Bạn có thể dễ dàng điều chỉnh bố cục phần tử bằng cách thay đổi định nghĩa vùng trong CSS mà không cần chỉnh sửa HTML.

Ghi chú

Khi sử dụng thuộc tính grid-template-areas, điều quan trọng là phải chú ý đến các điểm sau.

  • Số lượng tên trong mỗi hàng phải khớp với số lượng cột được định nghĩa.
  • Gán cùng một tên cho nhiều ô sẽ hợp nhất các ô đó, nhưng khi gán vào các hàng hoặc cột khác nhau, vùng đó phải là hình vuông.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid là một trong những giá trị của thuộc tính display trong CSS. Áp dụng thuộc tính này làm cho phần tử hoạt động như một container cấp nội tuyến, tạo một ngữ cảnh định dạng lưới bên trong. Không giống như display: grid, nó hoạt động như một phần tử nội tuyến trong luồng tài liệu.

Các trường hợp sử dụng của inline-grid

inline-grid không phổ biến như grid, nhưng nó có thể được sử dụng hiệu quả trong các tình huống cụ thể.

  • Lưới trong ngữ cảnh nội tuyến: Hữu ích khi bạn muốn đặt một lưới cùng với nội dung văn bản hoặc các phần tử nội tuyến khác. Ví dụ, nó hữu ích khi cần một cấu trúc lưới cho các nút, huy hiệu, nhãn, v.v., nhưng bạn muốn hiển thị nội tuyến mà không làm gián đoạn dòng văn bản.

  • Kiểm soát bố cục trong các phần tử nội tuyến: Ngay cả khi cần bố cục phức tạp trong các phần tử nội tuyến như liên kết, nút hoặc span, inline-grid có thể quản lý cấu trúc bên trong với bố cục lưới mà không cần hiển thị dạng khối.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

Trong trường hợp này, nút hiển thị các biểu tượng và văn bản trong một lưới, đồng thời vẫn duy trì dạng nội tuyến trong luồng tài liệu.

  • Các thành phần nội tuyến đáp ứng: inline-grid có thể được sử dụng cho các thành phần nhỏ là một phần của nội dung nội tuyến và yêu cầu một bố cục lưới. Ví dụ, nó phù hợp cho các biểu mẫu nội tuyến, huy hiệu, nhãn sản phẩm, v.v., nơi bạn muốn điều chỉnh bố cục với lưới trong khi vẫn giữ chúng trong dạng nội tuyến.

Căn chỉnh và định kích thước của inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Giống như các phần tử nội tuyến khác, inline-grid tuân thủ căn chỉnh theo chiều dọc so với nội dung xung quanh. Bạn có thể kiểm soát căn chỉnh của lưới bằng cách sử dụng thuộc tính vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Về kích thước, một phần tử inline-grid chỉ chiếm chiều rộng cần thiết bởi nội dung lưới của nó. Nếu cần, bạn có thể cài đặt rõ ràng chiều rộng, chiều cao và các kích thước tối thiểu/tối đa.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Ngoài ra, cách dàn bố cục của lưới có thể xác định kích thước của hộp chứa inline-grid, và xu hướng này mạnh hơn khi sử dụng các đơn vị linh hoạt như fr, auto, và phần trăm.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến FlexboxCác thuộc tính CSS liên quan đến bố cục cột