1 fr trong CSS là gì?

Lưới là gì?

Lưới là một tập hợp các đường ngang và dọc giao nhau xác định các cột và hàng. Các phần tử có thể được đặt vào lưới trong các dòng cột và hàng này. Bố cục lưới CSS có các tính năng sau

Kích thước theo dõi cố định và linh hoạt

Bạn có thể tạo lưới với kích thước rãnh cố định – ví dụ: sử dụng pixel. Điều này đặt lưới thành pixel được chỉ định phù hợp với bố cục bạn mong muốn. Bạn cũng có thể tạo lưới sử dụng kích thước linh hoạt với tỷ lệ phần trăm hoặc với đơn vị

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

vị trí mục

Bạn có thể đặt các mục vào một vị trí chính xác trên lưới bằng cách sử dụng số dòng, tên hoặc bằng cách nhắm mục tiêu một khu vực của lưới. Lưới cũng chứa một thuật toán để kiểm soát vị trí của các mục không được cung cấp vị trí rõ ràng trên lưới

Tạo các bản nhạc bổ sung để giữ nội dung

Bạn có thể xác định lưới rõ ràng với bố cục lưới. Thông số kỹ thuật Bố cục lưới đủ linh hoạt để thêm các hàng và cột bổ sung khi cần. Các tính năng như thêm "nhiều cột sẽ vừa với một vùng chứa" được bao gồm

kiểm soát căn chỉnh

Lưới chứa các tính năng căn chỉnh để chúng tôi có thể kiểm soát cách các mục căn chỉnh sau khi được đặt vào vùng lưới và cách toàn bộ lưới được căn chỉnh

Kiểm soát nội dung chồng chéo

Có thể đặt nhiều mục vào một ô hoặc vùng lưới và chúng có thể chồng lên nhau một phần. Lớp này sau đó có thể được kiểm soát với thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Lưới là một đặc điểm kỹ thuật mạnh mẽ, khi được kết hợp với các phần khác của CSS chẳng hạn như flexbox, có thể giúp bạn tạo các bố cục mà trước đây không thể xây dựng trong CSS. Tất cả bắt đầu bằng cách tạo lưới trong vùng chứa lưới của bạn

thùng chứa lưới

Chúng tôi tạo một thùng chứa lưới bằng cách khai báo

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Trong ví dụ này, tôi có một div chứa một lớp trình bao bọc và bên trong là năm phần tử con

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Tôi biến

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Tất cả các con trực tiếp bây giờ là các mục lưới. Trong trình duyệt web, bạn sẽ không thấy bất kỳ sự khác biệt nào về cách các mục này được hiển thị trước khi biến chúng thành lưới, vì lưới đã tạo ra một lưới cột duy nhất cho các mục. Tại thời điểm này, bạn có thể thấy hữu ích khi làm việc với Trình kiểm tra lưới, có sẵn như một phần của Công cụ dành cho nhà phát triển của Firefox. Nếu bạn xem ví dụ này trong Firefox và kiểm tra lưới, bạn sẽ thấy một biểu tượng nhỏ bên cạnh giá trị

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Khi bạn tìm hiểu và sau đó làm việc với Bố cục lưới CSS, công cụ này sẽ cung cấp cho bạn ý tưởng tốt hơn về những gì đang xảy ra với lưới của bạn một cách trực quan

Nếu chúng tôi muốn bắt đầu làm cho nó giống như lưới hơn, chúng tôi cần thêm các rãnh cột

đường lưới

Chúng tôi xác định các hàng và cột trên lưới của mình bằng các thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Các rãnh lưới được xác định trong lưới rõ ràng bằng cách sử dụng các thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Ví dụ cơ bản

Tôi có thể thêm vào ví dụ trước của chúng ta bằng cách thêm thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Bây giờ tôi đã tạo một lưới có ba rãnh cột rộng 200 pixel. Các mục con sẽ được đặt trên lưới này, mỗi mục trong mỗi ô lưới

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

đơn vị fr

Các bản nhạc có thể được xác định bằng bất kỳ đơn vị độ dài nào. Lưới cũng giới thiệu một đơn vị độ dài bổ sung để giúp chúng tôi tạo các đường lưới linh hoạt. Đơn vị

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Kích thước không bằng nhau

Trong ví dụ tiếp theo này, chúng tôi tạo một định nghĩa với một rãnh

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

.wrapper {
  display: grid;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Trộn kích thước linh hoạt và tuyệt đối

Trong ví dụ cuối cùng này, chúng tôi trộn các bản nhạc có kích thước tuyệt đối với các đơn vị

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

.wrapper {
  display: grid;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Theo dõi danh sách với ký hiệu lặp lại ()

Lưới lớn có nhiều rãnh có thể sử dụng ký hiệu

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Cũng có thể được viết là

.wrapper {
  display: grid;
}

Ký hiệu lặp lại có thể được sử dụng cho một phần của danh sách bản nhạc. Trong ví dụ tiếp theo này, tôi đã tạo một lưới có rãnh 20 pixel ban đầu, sau đó là phần lặp lại gồm 6 rãnh _______77 sau đó là rãnh 20 pixel cuối cùng

.wrapper {
  display: grid;
}

Ký hiệu lặp lại lấy danh sách bản nhạc và sử dụng nó để tạo một mẫu bản nhạc lặp lại. Trong ví dụ tiếp theo này, lưới của tôi sẽ bao gồm 10 rãnh, một rãnh

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
}

Lưới ngầm và rõ ràng

Khi tạo lưới ví dụ của chúng tôi, chúng tôi đã xác định cụ thể các rãnh cột của mình bằng thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Nếu bạn đặt thứ gì đó bên ngoài lưới đã xác định—hoặc do số lượng nội dung, cần nhiều rãnh lưới hơn—thì lưới sẽ tạo các hàng và cột trong lưới ẩn. Các bản nhạc này sẽ được tự động định kích thước theo mặc định, dẫn đến kích thước của chúng dựa trên nội dung bên trong chúng

Bạn cũng có thể xác định kích thước đã đặt cho các rãnh được tạo trong lưới ngầm với thuộc tính

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Trong ví dụ bên dưới, chúng tôi sử dụng

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Theo dõi kích thước và minmax

Khi thiết lập lưới rõ ràng hoặc xác định kích thước cho các hàng hoặc cột được tạo tự động, chúng tôi có thể muốn cung cấp cho các bản nhạc một kích thước tối thiểu, nhưng cũng đảm bảo rằng chúng mở rộng để phù hợp với bất kỳ nội dung nào được thêm vào. Ví dụ: tôi có thể muốn các hàng của mình không bao giờ thu gọn nhỏ hơn 100 pixel, nhưng nếu nội dung của tôi kéo dài đến 300 pixel về chiều cao, thì tôi muốn hàng kéo dài đến độ cao đó

Grid có giải pháp cho vấn đề này với hàm

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

đường lưới

Cần lưu ý rằng khi chúng ta xác định một lưới, chúng ta xác định các rãnh lưới chứ không phải các đường. Lưới sau đó cung cấp cho chúng tôi các dòng được đánh số để sử dụng khi định vị các mục. Trong lưới ba cột, hai hàng, chúng tôi có bốn dòng cột

Các dòng được đánh số theo chế độ viết của tài liệu. Trong ngôn ngữ viết từ trái sang phải, dòng 1 nằm ở phía bên trái của lưới. Trong ngôn ngữ đọc từ phải sang trái, nó nằm ở phía bên phải của lưới. Các dòng cũng có thể được đặt tên và chúng ta sẽ xem xét cách thực hiện việc này trong phần hướng dẫn sau của loạt bài này

Định vị các mục so với các dòng

Chúng tôi sẽ khám phá vị trí dựa trên dòng đầy đủ chi tiết trong một bài viết sau. Ví dụ sau minh họa việc này một cách đơn giản. Khi đặt một mục, chúng tôi nhắm mục tiêu theo dòng – thay vì theo dõi

Trong ví dụ sau, tôi đặt hai mục đầu tiên trên lưới theo dõi ba cột của chúng tôi, sử dụng các thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Mục thứ hai bắt đầu trên dòng cột lưới 1 và kéo dài một rãnh. Đây là mặc định nên tôi không cần chỉ định dòng kết thúc. Nó cũng kéo dài hai rãnh hàng từ hàng 3 đến hàng 5. Các mục khác sẽ tự đặt vào các khoảng trống trên lưới

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Ghi chú. Đừng quên rằng bạn có thể sử dụng Trình kiểm tra lưới trong Công cụ dành cho nhà phát triển Firefox để xem các mục được định vị như thế nào so với các đường của lưới

Tốc ký định vị dòng

Các giá trị viết tay được sử dụng ở trên có thể được nén thành một dòng cho các cột có

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Bạn có thể bỏ qua giá trị kết thúc nếu khu vực chỉ kéo dài một rãnh

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

ô lưới

Ô lưới là đơn vị nhỏ nhất trên lưới. Về mặt khái niệm, nó giống như một ô của bảng. Như chúng ta đã thấy trong các ví dụ trước của mình, khi một lưới được xác định là cha, các mục con sẽ tự sắp xếp trong một ô của mỗi lưới đã xác định. Trong hình bên dưới, tôi đã đánh dấu ô đầu tiên của lưới

Khu vực lưới

Các mục có thể mở rộng một hoặc nhiều ô theo hàng hoặc theo cột và điều này tạo ra một vùng lưới. Vùng lưới phải là hình chữ nhật – chẳng hạn như không thể tạo vùng hình chữ L. Vùng lưới được đánh dấu kéo dài hai hàng và hai cột

máng xối

Máng xối hoặc ngõ giữa các ô lưới có thể được tạo bằng cách sử dụng thuộc tính

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

Ghi chú. Khi lưới lần đầu tiên xuất hiện trong các trình duyệt,

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Tất cả các trình duyệt hiện hỗ trợ các giá trị không có tiền tố, tuy nhiên các phiên bản có tiền tố sẽ được duy trì dưới dạng bí danh để sử dụng chúng an toàn

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Bất kỳ khoảng trống nào được sử dụng bởi các khoảng trống sẽ được tính trước khi khoảng trống được chỉ định cho các rãnh

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

lưới lồng nhau

Một grid item có thể trở thành grid container. Trong ví dụ sau, tôi có lưới ba cột mà tôi đã tạo trước đó, với hai mục được định vị. Trong trường hợp này, mục đầu tiên có một số mục con. Vì các mục này không phải là con trực tiếp của lưới nên chúng không tham gia vào bố cục lưới và do đó hiển thị trong luồng tài liệu bình thường

Làm tổ không có lưới con

Nếu tôi đặt

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Trong trường hợp này, lưới lồng nhau không có mối quan hệ với cha mẹ. Như bạn có thể thấy trong ví dụ, nó không kế thừa

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

lưới con

Trong bản nháp làm việc của đặc tả Lưới cấp 2, có một tính năng được gọi là lưới con, tính năng này sẽ cho phép chúng tôi tạo các lưới lồng nhau sử dụng định nghĩa rãnh của lưới mẹ

Ghi chú. Tính năng này được cung cấp trong Firefox 71, hiện là trình duyệt duy nhất triển khai lưới con

Trong thông số kỹ thuật hiện tại, chúng tôi sẽ chỉnh sửa ví dụ lưới lồng nhau ở trên để thay đổi định nghĩa theo dõi của

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Phân lớp các mục với chỉ mục z

Các mục lưới có thể chiếm cùng một ô và trong trường hợp này, chúng ta có thể sử dụng thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Chồng chéo mà không có chỉ mục z

Nếu chúng ta quay lại ví dụ của mình với các mục được định vị theo số dòng, chúng ta có thể thay đổi điều này để làm cho hai mục chồng lên nhau

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Mục

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Kiểm soát đơn hàng

Chúng tôi có thể kiểm soát thứ tự các mục xếp chồng lên nhau bằng cách sử dụng thuộc tính

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

<div class="wrapper">
  <div>Onediv>
  <div>Twodiv>
  <div>Threediv>
  <div>Fourdiv>
  <div>Fivediv>
div>

Bước tiếp theo

Trong bài viết này, chúng tôi đã xem xét rất nhanh các khả năng của bố cục lưới. Khám phá và chơi với các ví dụ mã, sau đó chuyển sang phần tiếp theo của hướng dẫn này, nơi chúng ta sẽ thực sự bắt đầu tìm hiểu chi tiết về Bố cục lưới CSS

Giá trị của 1FR trong CSS là gì?

Có bao nhiêu pixel là 1FR?

Fr được tính CSS như thế nào?

Fr trong Flex là gì?