Hướng dẫn Grid trong CSS

Hướng dẫn toàn diện của chúng tôi về Grid CSS, tập trung vào tất cả các cài đặt cho cả vùng chứa gốc của Grid và các phần tử con của Grid.

Grid trong CSS là gì ?

CSS Grid là một hệ thống lưới dùng để tạo bố cục cho trang web. Nó cho phép bạn chia trang web của bạn thành một hệ thống các hàng và cột và chỉ định cách mỗi phần tử được sắp xếp trong hệ thống đó. CSS Grid cho phép bạn tạo các bố cục phức tạp với nhiều điều chỉnh linh hoạt và tùy biến hơn so với các kỹ thuật bố cục cũ như float hoặc table layout.

Ưu điểm của CSS grid

CSS Grid là một kỹ thuật thiết kế bảng của CSS, cho phép bạn tạo một bảng với các hàng và cột và sắp xếp các phần tử trong trang web. Điều này cung cấp một cách linh hoạt và mềm dẻo để thiết kế trang web, đặc biệt là cho những trang web cần sắp xếp nhiều nội dung theo một hình thức cụ thể.

Một số ưu điểm của CSS Grid bao gồm:

1. Cố định và linh hoạt: CSS Grid cho phép bạn xác định cụ thể sắp xếp các phần tử trong một bảng với các hàng và cột.
2. Tối ưu hóa về hiển thị: CSS Grid cho phép bạn sắp xếp phần tử một cách trực quan và dễ dàng để tạo ra một giao diện người dùng tốt.
3. Dễ dàng tạo responsive design: CSS Grid cho phép bạn tạo một bảng hiển thị tốt trên các thiết bị khác nhau với các độ phân giải màn hình khác nhau.
4. Tối ưu hóa về tốc độ truy xuất: CSS Grid cho phép bạn sắp xếp các phần tử theo một hình thức cụ thể, giúp tối ưu hóa tốc độ truy xuất

Thuộc tính cho class parent (Vùng chứa Grid)

display

Xác định phần tử dưới dạng vùng chứa Grid và thiết lập ngữ cảnh định dạng Grid mới cho nội dung của nó.

Value:

• grid – tạo Grid cấp khối
• inline-grid – tạo Grid cấp nội tuyến

Khả năng truyền các tham số Grid xuống thông qua các phần tử lồng nhau (hay còn gọi là mã con) đã được chuyển sang cấp 2 của đặc tả Grid CSS. Đây là một lời giải thích ngắn gọn.

Xem thêm Grid layout trong thiết kế website

.container {
  display: grid | inline-grid;
}

grid-template-columns, grid-template-rows

Xác định các cột và hàng của Grid bằng danh sách các giá trị được phân tách bằng dấu cách. Các giá trị đại diện cho kích thước đường đi và khoảng cách giữa chúng đại diện cho đường Grid.

Value:

• <track-size> – có thể là chiều dài, phần trăm hoặc một phần nhỏ của không gian trống trong Grid (sử dụng đơn vị fr)
• <line-name> – tên tùy ý bạn chọn

.container {
  grid-template-columns: ...  ...;
  grid-template-rows: ... ...;
}

Các dòng Grid được tự động gán các số dương từ các phép gán này (-1 là dòng thay thế cho hàng cuối cùng).

Nhưng bạn có thể chọn đặt tên rõ ràng cho các dòng. Lưu ý cú pháp dấu ngoặc cho tên dòng:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Lưu ý rằng một dòng có thể có nhiều hơn một tên. Ví dụ, ở đây dòng thứ hai sẽ có hai tên: row1-end và row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Nếu định nghĩa của bạn chứa các phần lặp lại, bạn có thể sử dụng ký hiệu repeat () để hợp lý hóa mọi thứ:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Tương đương với điều này:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Nếu nhiều dòng có cùng tên, chúng có thể được tham chiếu bởi tên dòng và số lượng của chúng.

.item {
  grid-column-start: col-start 2;
}

Đơn vị fr cho phép bạn đặt kích thước của bản nhạc dưới dạng một phần nhỏ của không gian trống của vùng chứa Grid. Ví dụ: điều này sẽ đặt mỗi mục bằng một phần ba chiều rộng của vùng chứa Grid:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Không gian trống được tính sau bất kỳ mục nào không linh hoạt. Trong ví dụ này, tổng dung lượng trống có sẵn cho các đơn vị fr không bao gồm 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

Xác định mẫu Grid bằng cách tham chiếu tên của các vùng Grid được chỉ định với thuộc tính vùng Grid. Việc lặp lại tên của một vùng Grid làm cho nội dung trải dài các ô đó. Dấu chấm biểu thị một ô trống. Bản thân cú pháp cung cấp một hình dung về cấu trúc của Grid.

Xem thêm Hiểu về cấu trúc File và Folder wordpress

Value:

• <grid-area-name> – tên của vùng Grid được chỉ định với vùng Grid
• . – dấu chấm biểu thị một ô Grid trống
• None- không có vùng Grid nào được xác định

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

Ví dụ:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Điều đó sẽ tạo ra một Grid có chiều rộng bốn cột và chiều cao ba hàng. Toàn bộ hàng trên cùng sẽ bao gồm vùng tiêu đề. Hàng giữa sẽ bao gồm hai khu vực chính, một ô trống và một khu vực thanh bên. Hàng cuối cùng là tất cả footer.

Mỗi hàng trong khai báo của bạn cần có cùng số ô.

Bạn có thể sử dụng bất kỳ số lượng dấu chấm liền kề nào để khai báo một ô trống duy nhất. Miễn là các dấu chấm không có khoảng cách giữa chúng, chúng biểu thị một ô duy nhất.

Lưu ý rằng bạn không đặt tên dòng theo cú pháp này, chỉ đặt tên các khu vực. Khi bạn sử dụng cú pháp này, các dòng ở một trong hai đầu của các khu vực thực sự được đặt tên tự động.

Nếu tên khu vực Grid của bạn là foo, tên của dòng hàng bắt đầu và dòng cột bắt đầu của khu vực sẽ là foo-start và tên của dòng cuối cùng và dòng cột cuối cùng của nó sẽ là foo-end. Điều này có nghĩa là một số dòng có thể có nhiều tên, chẳng hạn như dòng ngoài cùng bên trái trong ví dụ trên, sẽ có ba tên: header-start, main-start và footer-start.

Xem thêm Information Gathering – Fingerprint Web Application

grid-template

Một cách viết tắt để thiết lập Grid-mẫu-hàng, Grid-mẫu-cột và vùng Grid-mẫu trong một khai báo.

Value:

• none – đặt tất cả ba thuộc tính thành giá trị ban đầu của chúng
• <grid-template-rows> / <grid-template-columns> – đặt Grid-mẫu-cột và Grid-mẫu-hàng thành các giá trị được chỉ định, tương ứng và đặt các vùng Grid-mẫu thành không

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

Nó cũng chấp nhận một cú pháp phức tạp hơn nhưng khá tiện dụng để chỉ định cả ba. Đây là một ví dụ:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Điều đó tương đương với điều này:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

Vì Grid-template không đặt lại các thuộc tính Grid ngầm định (Grid-auto-columns, Grid-auto-row), có thể là những gì bạn muốn làm trong hầu hết các trường hợp, bạn nên sử dụng thuộc tính Grid thay vì mẫu Grid.

column-gap, row-gap, grid-column-gap, grid-row-gap

Chỉ định kích thước của các đường Grid. Bạn có thể nghĩ về nó giống như thiết lập chiều rộng của máng xối giữa các cột / hàng.

Value:

• <line-size> – một giá trị độ dài

.container {
  /* standard */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /* old */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

Ví dụ:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

Các máng xối chỉ được tạo giữa các cột / hàng, không phải ở các cạnh bên ngoài.

Lưu ý: Tiền tố Grid sẽ bị xóa và Grid-cột-khoảng cách và Grid-hàng-khoảng cách được đổi tên thành khoảng cách cột và khoảng cách hàng. Các thuộc tính chưa được sửa lỗi đã được hỗ trợ trong Chrome 68+, Safari 11.2 Release 50+ và Opera 54+.

grid-gap

Viết tắt cho khoảng cách hàng và khoảng cách cột

Value:

• <grid-row-gap> <grid-column-gap> – giá trị độ dài

.container {
   gap: <grid-row-gap> <grid-column-gap>;
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

Ví dụ:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  gap: 15px 10px;
}

Nếu không có khoảng cách hàng nào được chỉ định, khoảng cách hàng sẽ được đặt thành cùng một giá trị với khoảng cách cột

Lưu ý: Tiền tố Grid không được dùng nữa (nhưng ai biết được, có thể không bao giờ thực sự bị xóa khỏi trình duyệt). Về cơ bản, khoảng cách Grid được đổi tên thành khoảng cách. Thuộc tính chưa được sửa lỗi đã được hỗ trợ trong Chrome 68+, Safari 11.2 Release 50+ và Opera 54+.

justify-items

Căn chỉnh các mục Grid dọc theo trục nội tuyến (hàng) (trái ngược với căn chỉnh các mục thẳng hàng dọc theo trục khối (cột)). Giá trị này áp dụng cho tất cả các mục Grid bên trong vùng chứa.

Value:

• start – căn chỉnh các mục bằng phẳng với cạnh bắt đầu của ô của chúng
• end – căn chỉnh các mục sao cho bằng phẳng với cạnh cuối của ô của chúng
• center – căn chỉnh các mục ở giữa ô của chúng
• stretch – lấp đầy toàn bộ chiều rộng của ô (đây là giá trị mặc định)

.container {
  justify-items: start | end | center | stretch;
}

Ví dụ:

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

Hành vi này cũng có thể được đặt trên các mục Grid riêng lẻ thông qua thuộc tính justify-self.

align-items

Căn chỉnh các mục Grid dọc theo trục khối (cột) (trái ngược với căn lề cho các mục căn chỉnh dọc theo trục (hàng) nội tuyến). Giá trị này áp dụng cho tất cả các mục Grid bên trong vùng chứa.

Value:

• start – căn chỉnh các mục bằng phẳng với cạnh bắt đầu của ô của chúng
• end – căn chỉnh các mục sao cho bằng phẳng với cạnh cuối của ô của chúng
• center – căn chỉnh các mục ở giữa ô của chúng
• Stretch- lấp đầy toàn bộ chiều cao của ô (đây là giá trị mặc định)

.container {
  align-items: start | end | center | stretch;
}

Ví dụ:

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

Hành vi này cũng có thể được đặt trên các mục Grid riêng lẻ thông qua thuộc tính align-self. Hành vi này cũng có thể được đặt trên các mục Grid riêng lẻ thông qua thuộc tính align-self.

place-items

place-items đặt cả thuộc tính align-items và justify-items trong một khai báo.

Value:

• <align-items> / <justify-items> – Giá trị đầu tiên đặt align-items, giá trị thứ hai justify-items. Nếu giá trị thứ hai bị bỏ qua, giá trị đầu tiên được gán cho cả hai thuộc tính.

Tất cả các trình duyệt chính ngoại trừ Edge đều hỗ trợ thuộc tính tốc ký địa điểm.

Để biết thêm chi tiết, hãy xem căn chỉnh các mục và căn chỉnh các mục.

Điều này có thể rất hữu ích để căn giữa đa hướng siêu nhanh:

.center {
  display: grid;
  place-items: center;
}

justify-content

Đôi khi tổng kích thước của Grid của bạn có thể nhỏ hơn kích thước của vùng chứa Grid của nó. Điều này có thể xảy ra nếu tất cả các mục Grid của bạn có kích thước bằng các đơn vị không linh hoạt như px. Trong trường hợp này, bạn có thể đặt căn chỉnh của Grid trong vùng chứa Grid. Thuộc tính này căn chỉnh Grid dọc theo trục nội tuyến (hàng) (trái ngược với căn chỉnh nội dung căn chỉnh Grid dọc theo trục khối (cột)).

Value:

• start – căn chỉnh Grid cho bằng phẳng với cạnh bắt đầu của vùng chứa Grid
• end – căn chỉnh cho Grid phẳng với cạnh cuối của hộp chứa Grid
• center – căn chỉnh Grid ở giữa vùng chứa Grid
• stretch – thay đổi kích thước các mục Grid để cho phép Grid lấp đầy toàn bộ chiều rộng của vùng chứa Grid
• space-around – đặt một lượng không gian bằng nhau giữa mỗi mục Grid, với khoảng cách bằng một nửa ở các đầu xa
• space-between – đặt một khoảng cách đồng đều giữa mỗi mục Grid, không có khoảng trống ở các đầu xa
• space-evenly – đặt một khoảng cách đồng đều giữa mỗi mục Grid, bao gồm cả các đầu xa

Ví dụ:

.container {
  justify-content: start;
}

.container {
  justify-content: end;    
}

.container {
  justify-content: center;    
}

.container {
  justify-content: stretch;    
}

.container {
  justify-content: space-around;    
}

.container {
  justify-content: space-between;    
}

.container {
  justify-content: space-evenly;    
}

align-content

Đôi khi tổng kích thước của Grid của bạn có thể nhỏ hơn kích thước của vùng chứa Grid của nó. Điều này có thể xảy ra nếu tất cả các mục Grid của bạn có kích thước bằng các đơn vị không linh hoạt như px. Trong trường hợp này, bạn có thể đặt căn chỉnh của Grid trong vùng chứa Grid. Thuộc tính này căn chỉnh Grid dọc theo trục khối (cột) (trái ngược với justify-content căn chỉnh Grid dọc theo trục nội tuyến (hàng)).

Value:

• start – căn chỉnh Grid cho bằng phẳng với cạnh bắt đầu của vùng chứa Grid
• end – căn chỉnh cho Grid phẳng với cạnh cuối của hộp chứa Grid
• center – căn chỉnh Grid ở giữa vùng chứa Grid
• Stretch- thay đổi kích thước các mục Grid để cho phép Grid lấp đầy toàn bộ chiều cao của vùng chứa Grid
• space-around – đặt một lượng không gian bằng nhau giữa mỗi mục Grid, với khoảng cách bằng một nửa ở các đầu xa
• space-between – đặt một khoảng cách đồng đều giữa mỗi mục Grid, không có khoảng trống ở các đầu xa
• space-evenly – đặt một khoảng cách đồng đều giữa mỗi mục Grid, bao gồm cả các đầu xa

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

Ví dụ:

.container {
  align-content: start;    
}

.container {
  align-content: end;    
}

.container {
  align-content: center;    
}

.container {
  align-content: stretch;    
}

.container {
  align-content: space-around;    
}

.container {
  align-content: space-between;    
}

.container {
  align-content: space-evenly;    
}

place-content

place-content đặt cả thuộc tính align-content và justify-content trong một khai báo.

Value:

• <align-content> / <justify-content> – Giá trị đầu tiên đặt align-content, giá trị thứ hai justify-content. Nếu giá trị thứ hai bị bỏ qua, giá trị đầu tiên được gán cho cả hai thuộc tính.

Tất cả các trình duyệt chính ngoại trừ Edge đều hỗ trợ thuộc tính tốc ký nội dung địa điểm.

Để biết thêm chi tiết, hãy xem căn chỉnh nội dung và căn chỉnh nội dung.

grid-auto-columns, grid-auto-rows

Chỉ định kích thước của bất kỳ rãnh Grid nào được tạo tự động (còn gọi là rãnh Grid ngầm định). Các tuyến đường ngầm được tạo khi có nhiều mục Grid hơn các ô trong Grid hoặc khi một mục Grid được đặt bên ngoài Grid rõ ràng. (xem Sự khác biệt giữa Grid rõ ràng và Grid ngầm)

Value:

• <track-size> – có thể là chiều dài, phần trăm hoặc một phần nhỏ của không gian trống trong Grid (sử dụng đơn vị fr)

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

Để minh họa cách tạo các rãnh Grid ngầm định, hãy nghĩ về điều này:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

Điều này tạo ra một Grid 2 x 2.

Nhưng bây giờ hãy tưởng tượng bạn sử dụng Grid-cột và hàng Grid để định vị các mục Grid của bạn như thế này:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Chúng tôi đã yêu cầu .item-b bắt đầu trên dòng cột 5 và kết thúc ở dòng 6, nhưng chúng tôi chưa bao giờ xác định dòng cột 5 hoặc 6. Vì chúng tôi đã tham chiếu các dòng không tồn tại, các rãnh ngầm có độ rộng bằng 0 được tạo để lấp đầy trong các khoảng trống. Chúng tôi có thể sử dụng Grid-tự động-cột và Grid-tự động hàng để chỉ định độ rộng của các rãnh ngầm này:

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

Nếu bạn có các mục Grid mà bạn không đặt rõ ràng trên Grid, thì thuật toán tự động đặt vị trí sẽ tự động đặt các mục đó. Thuộc tính này kiểm soát cách hoạt động của thuật toán vị trí tự động.

Value:

• row – ra lệnh cho thuật toán đặt vị trí tự động lần lượt điền vào từng hàng, thêm các hàng mới nếu cần (mặc định)
• cột – yêu cầu thuật toán tự động sắp xếp vị trí lần lượt điền vào từng cột, thêm các cột mới nếu cần
• dense – cho thuật toán tự động sắp xếp vị trí để cố gắng lấp đầy các lỗ sớm hơn trong Grid nếu các mục nhỏ hơn xuất hiện muộn hơn

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

Lưu ý rằng mật độ dày đặc chỉ thay đổi thứ tự trực quan của các mặt hàng của bạn và có thể khiến chúng xuất hiện không theo thứ tự, điều này không tốt cho khả năng tiếp cận.

Ví dụ:

Hãy xem xét HTML này:

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Bạn xác định một Grid có năm cột và hai hàng và đặt dòng tự động Grid thành hàng (cũng là mặc định):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

Khi đặt các mục trên Grid, bạn chỉ xác định vị trí cho hai trong số chúng:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Vì chúng tôi đặt dòng tự động Grid thành hàng, Grid của chúng tôi sẽ trông như thế này. Lưu ý cách ba mặt hàng chúng tôi không đặt (item-b, item-c và item-d) di chuyển trên các hàng có sẵn:

Thay vào đó, nếu chúng tôi đặt dòng tự động Grid thành cột, dòng mục-b, mục-c và mục-d xuống các cột:

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

grid

Một cách viết tắt để thiết lập tất cả các thuộc tính sau trong một khai báo:  grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, và grid-auto-flow  (Lưu ý: Bạn chỉ có thể chỉ định các thuộc tính Grid rõ ràng hoặc ngầm định trong một khai báo Grid duy nhất).

Value:

• none – đặt tất cả các thuộc tính con thành giá trị ban đầu của chúng.
• <grid-template> – hoạt động giống như cách viết tắt của mẫu Grid.
• <grid-template-rows> / [auto-flow && dày đặc? ] <grid-auto-columns>? – đặt grid-template-rows thành giá trị được chỉ định. Nếu từ khóa auto-flow ở bên phải của dấu gạch chéo, nó sẽ đặt Grid-auto-flow thành cột. Nếu từ khóa dense được chỉ định bổ sung, thì thuật toán tự động sắp xếp vị trí sẽ sử dụng thuật toán đóng gói “dense“. Nếu grid-template-columns bị bỏ qua, nó được đặt thành tự động.
• [auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> – đặt grid-template-columns thành giá trị được chỉ định. Nếu từ khóa auto-flow ở bên trái của dấu gạch chéo, nó sẽ đặt Grid-auto-flow thành hàng. Nếu từ khóa dense được chỉ định bổ sung, thuật toán vị trí tự động sử dụng thuật toán đóng gói “dense“. Nếu grid-auto-rows bị bỏ qua, nó được đặt thành tự động.

Ví dụ:

Hai khối mã sau là tương đương:

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

Hai khối mã sau là tương đương:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

Hai khối mã sau là tương đương:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

Hai khối mã sau là tương đương:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

Và

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

Nó cũng chấp nhận một cú pháp phức tạp hơn nhưng khá tiện dụng để thiết lập mọi thứ cùng một lúc. Bạn chỉ định các khu vực Grid-template, các Grid-template-rows và các Grid-template-columns, và tất cả các thuộc tính phụ khác được đặt thành các giá trị ban đầu của chúng. Những gì bạn đang làm là chỉ định tên đường và kích thước đường thẳng hàng với các vùng Grid tương ứng của chúng. Điều này dễ dàng nhất để mô tả bằng một ví dụ:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

Điều đó tương đương với điều này:

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

Thuộc tính cho lớp con(Grid items)

float, display: inline-block, display: table-cell, vertical-align and column-* thuộc tính này không có hiệu quả trong Grid.

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Xác định vị trí của mục Grid trong Grid bằng cách tham chiếu đến các đường Grid cụ thể. grid-column-start / grid-row-start là dòng bắt đầu mục và Grid-column-end / grid-row-end là dòng kết thúc của mục.

Giá trị:

• <line> – có thể là một số để chỉ một đường Grid được đánh số hoặc một tên để chỉ một đường Grid đã đặt tên
• span <number> – mục sẽ trải dài trên số lượng đường Grid được cung cấp
• span <name> – mục sẽ kéo dài cho đến khi chạm dòng tiếp theo với tên đã cho
• auto – cho biết vị trí tự động, khoảng cách tự động hoặc khoảng cách mặc định của một

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Ví dụ:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Nếu không có grid-column-end / grid-row-end nào được khai báo, thì mục này sẽ trải dài trên 1 bản nhạc theo mặc định.

Các mục có thể chồng lên nhau. Bạn có thể sử dụng z-index để kiểm soát thứ tự xếp chồng của chúng.

grid-column, grid-row

Viết tắt tương ứng cho Grid-cột-bắt đầu + Grid-cột-kết thúc và Grid-hàng-bắt đầu + Grid-hàng-kết thúc.

Value:

• <start-line> / <end-line> – mỗi cái chấp nhận tất cả các giá trị giống như phiên bản tốc ký, bao gồm cả span

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Ví dụ:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

grid-area

Nếu không có giá trị dòng cuối nào được khai báo, mặt hàng sẽ trải dài trên 1 bản nhạc theo mặc định.

Đặt tên cho một mục để nó có thể được tham chiếu bởi một mẫu được tạo bằng thuộc tính Grid-template-Area. Ngoài ra, thuộc tính này có thể được sử dụng như một cách viết tắt thậm chí còn ngắn hơn cho Grid-row-start + Grid-column-start + Grid-row-end + Grid-column-end.

Value:

• <name> – tên bạn chọn
• <row-start> / <column-start> / <row-end> / <column-end> – có thể là số hoặc dòng được đặt tên

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Ví dụ:

.item-d {
  grid-area: header;
}

Là cách viết tắt của Grid-row-start + Grid-column-start + Grid-row-end + Grid-column-end:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

justify-self

Căn chỉnh một mục Grid bên trong một ô dọc theo trục nội tuyến (hàng) (trái ngược với căn chỉnh tự căn chỉnh dọc theo trục khối (cột)). Giá trị này áp dụng cho một mục Grid bên trong một ô.

Value:

• start – căn chỉnh mục Grid sao cho phẳng với cạnh bắt đầu của ô
• end – căn chỉnh mục Grid sao cho phẳng với cạnh cuối của ô
• center – căn chỉnh mục Grid ở giữa ô
• stretch- lấp đầy toàn bộ chiều rộng của ô (đây là giá trị mặc định)

.item {
  justify-self: start | end | center | stretch;
}

Ví dụ:

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

Để đặt căn chỉnh cho tất cả các mục trong Grid, hành vi này cũng có thể được đặt trên vùng chứa Grid thông qua thuộc tính justify-items.

align-self

Căn chỉnh một mục Grid bên trong một ô dọc theo trục khối (cột) (trái ngược với căn lề tự căn chỉnh dọc theo trục nội tuyến (hàng)). Giá trị này áp dụng cho nội dung bên trong một mục Grid.

Value:

• start – căn chỉnh mục Grid sao cho phẳng với cạnh bắt đầu của ô
• end – căn chỉnh mục Grid sao cho phẳng với cạnh cuối của ô
• center – căn chỉnh mục Grid ở giữa ô
• stretch- lấp đầy toàn bộ chiều cao của ô (đây là giá trị mặc định)

.item {
  align-self: start | end | center | stretch;
}

Ví dụ:

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

Để căn chỉnh tất cả các mục trong một Grid, hành vi này cũng có thể được đặt trên vùng chứa Grid thông qua thuộc tính align-items.

place-self

place-self đặt cả thuộc tính align-self và justify-self trong một khai báo duy nhất.

Value:

• auto – Căn chỉnh “mặc định” cho chế độ bố cục.
• <align-self> / <justify-self> – Giá trị đầu tiên đặt align-self, giá trị thứ hai justify-self. Nếu giá trị thứ hai bị bỏ qua, giá trị đầu tiên được gán cho cả hai thuộc tính.

Ví dụ:

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

Tất cả các trình duyệt chính ngoại trừ Edge đều hỗ trợ thuộc tính tốc ký tự địa danh.

Đơn vị & Chức năng Đặc biệt

fr units

Bạn có thể sẽ sử dụng nhiều đơn vị phân số trong CSS Grid, chẳng hạn như 1fr. Về cơ bản, chúng có nghĩa là “một phần của không gian còn lại”. Vì vậy, một khai báo như:

grid-template-columns: 1fr 3fr;

Trung bình, lỏng lẻo, 25% 75%. Ngoại trừ việc các giá trị phần trăm đó chắc chắn hơn nhiều so với các đơn vị phân số. Ví dụ: nếu bạn đã thêm phần đệm vào các cột dựa trên tỷ lệ phần trăm đó, thì bây giờ bạn đã phá vỡ 100% chiều rộng (giả sử là mô hình hộp content-box). Các đơn vị phân số cũng thân thiện hơn nhiều khi kết hợp với các đơn vị khác, như bạn có thể tưởng tượng:

grid-template-columns: 50px min-content 1fr;

Sizing Keywords

Khi định kích thước hàng và cột, bạn có thể sử dụng tất cả các độ dài quen thuộc, như px, rem,%, v.v., nhưng bạn cũng có các từ khóa:

• min-content: kích thước tối thiểu của nội dung. Hãy tưởng tượng một dòng văn bản như “The rất dài hotdog.”, Nội dung tối thiểu có thể là chiều rộng của thế giới “The”.
• max-content: kích thước tối đa của nội dung. Hãy tưởng tượng câu trên, max-content là độ dài của cả câu.
• auto: từ khóa này rất giống với các đơn vị fr, ngoại trừ việc chúng “thua” trong cuộc chiến về kích thước so với các đơn vị fr khi phân bổ không gian còn lại.
• fit-content: sử dụng không gian có sẵn, nhưng không bao giờ ít hơn nội dung tối thiểu và không bao giờ nhiều hơn nội dung tối đa.
• fractional units: xem ở trên

Sizing Functions

• Hàm minmax () thực hiện chính xác những gì có vẻ như: nó đặt giá trị nhỏ nhất và lớn nhất cho độ dài có thể. Điều này rất hữu ích khi kết hợp với các đơn vị tương đối. Giống như bạn có thể muốn một cột chỉ có thể thu nhỏ cho đến nay. Điều này cực kỳ hữu ích và có thể là những gì bạn muốn:

grid-template-columns: minmax(100px, 1fr) 3fr;

• Hàm min ().
• Hàm max ().

The repeat() Function and Keywords

Hàm repeat () có thể lưu một số thao tác nhập:

grid-template-columns:
  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

/* easier: */
grid-template-columns:
  repeat(8, 1fr);

/* especially when: */
grid-template-columns:
  repeat(8, minmax(10px, 1fr));

Nhưng repeat () có thể trở nên lạ mắt hơn khi được kết hợp với các từ khóa:

• auto-fill: Điều chỉnh nhiều cột nhất có thể trên một hàng, ngay cả khi chúng trống.
• auto-fit: Điều chỉnh bất kỳ cột nào có trong không gian. Thích mở rộng các cột để lấp đầy không gian hơn là các cột trống.

Đoạn mã này mang đoạn mã nổi tiếng nhất trong tất cả CSS Grid và là một trong những thủ thuật CSS tuyệt vời mọi thời đại:

grid-template-columns: 
  repeat(auto-fit, minmax(250px, 1fr));

Masonry

Một tính năng thử nghiệm của Grid CSS là bố cục khối xây. Lưu ý rằng có rất nhiều cách tiếp cận để xây dựng CSS, nhưng hầu hết chúng đều là thủ thuật và có những nhược điểm lớn hoặc không phải là những gì bạn mong đợi.

Thông số kỹ thuật hiện đã có cách chính thức và điều này nằm sau một lá cờ trong Firefox:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Subgrid

Subgrid là một tính năng cực kỳ hữu ích của Grid cho phép các mục Grid có một Grid của riêng chúng kế thừa các đường Grid từ Grid mẹ.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}
.grid-item {
  grid-column: 2 / 7;

  display: grid;
  grid-template-columns: subgrid;
}
.child-of-grid-item {
  /* gets to participate on parent grid! */
  grid-column: 3 / 6;
}

Tính năng này chỉ được hỗ trợ trong Firefox ngay bây giờ, nhưng nó thực sự cần phải có ở mọi nơi.

Bạn cũng nên biết về nội dung display: ;. Điều này không giống như subgrid, nhưng nó có thể là một công cụ hữu ích đôi khi theo cách tương tự

<div class="grid-parent">

  <div class="grid-item"></div>
  <div class="grid-item"></div>

  <ul style="display: contents;">
    <!-- These grid-items get to participate on 
         the same grid!-->
    <li class="grid-item"></li>
    <li class="grid-item"></li>
  </ul>

</div>

Fluid Columns Snippet

Các cột có chiều rộng linh hoạt chia thành nhiều cột hơn hoặc ít hơn khi có không gian, không có truy vấn phương tiện!

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

Animation

Theo đặc tả mô-đun CSS Grid Layout Module cấp 1, có 5 thuộc tính Grid có thể hoạt hình:

• Grid-gap, Grid-row-gap, Grid-column-gap dưới dạng chiều dài, tỷ lệ phần trăm hoặc calc.
• Grid-template-column, Grid-template-row dưới dạng danh sách đơn giản về độ dài, phần trăm hoặc calc, miễn là sự khác biệt duy nhất là giá trị của các thành phần độ dài, phần trăm hoặc calc trong danh sách.

Theo cách viết này, chỉ hoạt ảnh của khoảng cách (Grid-), (Grid-) khoảng cách hàng, (Grid-) cột-khoảng cách được triển khai trong bất kỳ trình duyệt nào được thử nghiệm.