Hướng dẫn grid css trick - thủ thuật css lưới

Nhận poster!

Tham khảo hướng dẫn này rất nhiều? Ở đây, một hình ảnh độ phân giải cao mà bạn có thể in!

Giới thiệu về CSS Grid

Bố cục lưới CSS (còn gọi là lưới điện lưới hoặc mạng CSS GRID), là hệ thống bố cục dựa trên lưới hai chiều, so với bất kỳ hệ thống bố cục web nào trong quá khứ, thay đổi hoàn toàn cách chúng tôi thiết kế giao diện người dùng. CSS luôn được sử dụng để bố trí các trang web của chúng tôi, nhưng nó không bao giờ làm được một công việc rất tốt. Đầu tiên, chúng tôi đã sử dụng các bảng, sau đó nổi, định vị và chặn nội tuyến, nhưng tất cả các phương pháp này về cơ bản là hack và bỏ qua rất nhiều chức năng quan trọng (ví dụ, định tâm dọc). Flexbox cũng là một công cụ bố trí rất tuyệt vời, nhưng luồng một chiều của nó có các trường hợp sử dụng khác nhau-và chúng thực sự hoạt động cùng nhau khá tốt! GRID là mô -đun CSS đầu tiên được tạo riêng để giải quyết các vấn đề về bố cục mà chúng tôi đã tấn công theo cách của chúng tôi miễn là chúng tôi đã tạo ra các trang web.

Mục đích của hướng dẫn này là trình bày các khái niệm lưới khi chúng tồn tại trong phiên bản mới nhất của đặc điểm kỹ thuật. Vì vậy, tôi đã giành chiến thắng khi bao gồm cú pháp Internet Explorer lỗi thời (mặc dù bạn hoàn toàn có thể sử dụng Grid trong IE 11) hoặc các bản hack lịch sử khác.

CSS lưới cơ bản

Kể từ tháng 3 năm 2017, hầu hết các trình duyệt được vận chuyển bản địa, hỗ trợ không trộn lẫn cho CSS Grid: Chrome (bao gồm cả trên Android), Firefox, Safari (bao gồm trên IOS) và Opera. Mặt khác, Internet Explorer 10 và 11 hỗ trợ nó, nhưng nó là một triển khai cũ với cú pháp lỗi thời. Thời gian để xây dựng với lưới là bây giờ!

Để bắt đầu, bạn phải xác định một phần tử container là lưới với & nbsp; ________ 75, đặt kích thước cột và hàng với & nbsp; ____ 76 & nbsp; và & nbsp; Tương tự như Flexbox, thứ tự nguồn của các mục lưới không quan trọng. CSS của bạn có thể đặt chúng theo bất kỳ thứ tự nào, điều này giúp việc sắp xếp lại lưới của bạn bằng các truy vấn phương tiện. Hãy tưởng tượng việc xác định bố cục của toàn bộ trang của bạn, và sau đó sắp xếp lại hoàn toàn nó để phù hợp với chiều rộng màn hình khác nhau chỉ với một vài dòng CSS. Grid là một trong những mô -đun CSS mạnh nhất từng được giới thiệu.

Thuật ngữ lưới CSS quan trọng

Trước khi lặn vào các khái niệm về lưới điện, điều quan trọng là phải hiểu thuật ngữ. Vì các thuật ngữ liên quan ở đây đều giống nhau về mặt khái niệm, nên rất dễ nhầm lẫn với nhau nếu bạn không ghi nhớ ý nghĩa đầu tiên của chúng được xác định bởi đặc tả lưới. Nhưng đừng lo lắng, có rất nhiều trong số họ.

Thùng chứa lưới

Phần tử trên đó & nbsp; ________ 75 & nbsp; được áp dụng. Nó là cha mẹ trực tiếp của tất cả các mục lưới. Trong ví dụ này & nbsp; ________ 81 & nbsp; là thùng chứa lưới.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Đường lưới

Các đường phân chia tạo nên cấu trúc của lưới. Chúng có thể là theo chiều dọc (các đường lưới cột cột) hoặc ngang (dòng lưới hàng của dòng) và nằm ở hai bên của một hàng hoặc cột. Ở đây, đường màu vàng là một ví dụ về đường lưới cột.

Theo dõi lưới

Không gian giữa hai đường lưới liền kề. Bạn có thể nghĩ về chúng như các cột hoặc hàng của lưới. Ở đây, theo dõi lưới giữa các dòng lưới thứ hai và hàng thứ ba.

Khu vực lưới

Tổng không gian được bao quanh bởi bốn đường lưới. Một khu vực lưới có thể bao gồm bất kỳ số lượng ô lưới. Ở đây, khu vực lưới giữa các dòng lưới hàng 1 và 3 và các dòng lưới cột 1 và 3.

Mục lưới

Những đứa trẻ (tức là & nbsp; Direct & nbsp; hậu duệ) của thùng chứa lưới. Ở đây, các yếu tố & nbsp; ____ 82 & nbsp; là các mục lưới, nhưng & nbsp;

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Ô lưới

Không gian giữa hai hàng liền kề và hai đường lưới cột liền kề. Nó có một đơn vị duy nhất trên mạng của lưới điện. Ở đây, ô lưới giữa các dòng lưới hàng 1 và 2 và các dòng lưới cột 2 và 3.

Thuộc tính lưới CSS

Thuộc tính cho cha mẹ (thùng chứa lưới)
(Grid Container)

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

  4

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

  6

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

  7

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

  7

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

  8

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

  9

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

  0

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

  1

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

  2

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

  3

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

  4

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

  5

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

  6

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

  7

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

  8

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

  9

• <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  00

• <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  01

trưng bày

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

Values:

• ________ 101 & nbsp;-Tạo lưới cấp khối – generates a block-level grid
• ________ 103 & nbsp;-Tạo lưới cấp nội tuyến – generates an inline-level grid

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

Khả năng truyền các tham số lưới xuống thông qua các phần tử lồng nhau (còn gọi là subgrids) đã được chuyển sang & nbsp; cấp 2 của đặc tả lưới điện CSS. & Nbsp; ở đây, & nbsp;

grid-template-columnsgrid-template-rows
grid-template-rows

Xác định các cột và hàng của lưới với danh sách các giá trị được phân tách không gian. Các giá trị đại diện cho kích thước theo dõi và khoảng cách giữa chúng biểu thị đường lưới.

Values:

• ________ 104 & nbsp; - có thể là một chiều dài, tỷ lệ phần trăm hoặc một phần không gian trống trong lưới bằng cách sử dụng đơn vị & nbsp; ____ 105 & nbsp; – can be a length, a percentage, or a fraction of the free space in the grid using the 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  05 unit (more on this unit over at DigitalOcean)
• ________ 106 & nbsp; - một tên tùy ý của bạn chọn – an arbitrary name of your choosing

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

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

Nhưng bạn có thể chọn đặt tên rõ ràng các dòng. Lưu ý cú pháp khung 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];
}

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and 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 & nbsp; ________ 107 & nbsp; ký hiệu để 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 chia sẻ cùng một tên, chúng có thể được tham chiếu bằng tên dòng và đếm của chúng.

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

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

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

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

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

grid-template-areas

Xác định một mẫu lưới bằng cách tham chiếu tên của các khu vực lưới được chỉ định với & nbsp; ____ 110 & nbsp; thuộc tính. Lặp lại tên của một khu vực lưới làm cho nội dung kéo dài các ô đó. Một khoảng thời gian 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 lưới.

Values:

• ________ 111 ​​& nbsp; - Tên của một khu vực lưới được chỉ định với & nbsp; ________ 110 – the name of a grid area specified with 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  10
• ________ 113 & nbsp; - Một khoảng thời gian biểu thị một ô lưới trống – a period signifies an empty grid cell
• ________ 114 & nbsp; - Không có khu vực lưới được xác định – no grid areas are defined

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Example:

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Đó sẽ tạo ra một lưới mà bốn cột rộng bằng ba hàng cao. Toàn bộ hàng trên cùng sẽ bao gồm & nbsp; tiêu đề & nbsp; khu vực. Hàng giữa sẽ bao gồm hai & nbsp; chính & nbsp; khu vực, một ô trống và một & nbsp; sidebar & nbsp; khu vực. Hàng cuối cùng là tất cả & nbsp; chân trang.header area. The middle row will be composed of two main areas, one empty cell, and one sidebar area. The last row is all footer.

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

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

Lưu ý rằng bạn không đặt tên các dòng với cú pháp này, chỉ là các khu vực. Khi bạn sử dụng cú pháp này, các dòng ở hai đầu của khu vực thực sự sẽ được đặt tên tự động. Nếu tên của khu vực lưới của bạn là & nbsp; foo, tên của dòng hàng đầu khu vực và dòng cột bắt đầu sẽ là & nbsp; foo-start, và tên của dòng hàng cuối cùng và dòng cột cuối cùng của nó sẽ là & nbsp; 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 bên trái trong ví dụ trên, sẽ có ba tên: tiêu đề bắt đầu, bắt đầu chính và khởi động chân.foo, the name of the area’s starting row line and starting column line will be foo-start, and the name of its last row line and last column line will be foo-end. This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.

grid-template

Một tốc ký cho cài đặt & nbsp; ________ 77, & nbsp; ________ 76, và & nbsp; ________ 87 & nbsp; trong một tuyên bố duy nhất.

Values:

• ________ 114 & nbsp; - Đặt cả ba thuộc tính thành các giá trị ban đầu của chúng – sets all three properties to their initial values
• ________ 119 & nbsp;/& nbsp; ________ 120> & nbsp; - set & nbsp; – sets 

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

  6 and 

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

  7 to the specified values, respectively, and sets 

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

  7 to 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  14

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

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ụ:

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

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

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Vì & NBSP;

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

cột-gaprow-gapgrid-m-plid-row-gap
row-gap
grid-column-gap
grid-row-gap

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

Values:

• ________ 131 & nbsp; - Giá trị độ dài – a length value

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Example:

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

The gutters are only created between the columns/rows, not on the outer edges.

Lưu ý: Các tiền tố & nbsp; ____ 132 & nbsp; sẽ bị xóa và & nbsp; Các thuộc tính chưa được phân chia đã được hỗ trợ trong Chrome 68+, Safari 11.2 Phát hành 50+ và Opera 54+.

gapgrid-gap
grid-gap

Một tốc ký cho & nbsp; ________ 136 & nbsp; và & nbsp; ________ 135

Values:

• ________ 139 & nbsp; ________ 140 & nbsp; - Giá trị độ dài – length values

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Thí dụ:

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Nếu không & nbsp; ________ 136 & nbsp;

Lưu ý: Tiền tố & NBSP; Về cơ bản & nbsp; ________ 91 & nbsp; được đổi tên thành & nbsp; ________ 145. Thuộc tính chưa được cắt bỏ đã được hỗ trợ trong Chrome 68+, Safari 11.2 Phát hành 50+ và Opera 54+.: The 

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

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

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

justify-items

Sắp xếp các mục lưới dọc theo & nbsp; nội tuyến (hàng) & nbsp; trục (trái ngược với & nbsp; ________ 93 & nbsp; sắp xếp dọc theo & nbsp; khối (cột) & nbsp; trục). Giá trị này áp dụng cho tất cả các mục lưới bên trong container.

Values:

• ________ 147 & nbsp; - Căn chỉnh các mục được xả với cạnh bắt đầu của ô của chúng – aligns items to be flush with the start edge of their cell
• ________ 148 & nbsp; - Căn chỉnh các mục được xả với cạnh cuối của ô của chúng – aligns items to be flush with the end edge of their cell
• ________ 149 & nbsp; - Sắp xếp các mục ở trung tâm của ô của chúng – aligns items in the center of their cell
• ________ 150 & nbsp; - lấp đầy toàn bộ chiều rộng của ô (đây là mặc định) – fills the whole width of the cell (this is the default)

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

Examples:

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

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

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

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

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

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

This behavior can also be set on individual grid items via the 

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

align-items

Sắp xếp các mục lưới dọc theo & nbsp; block (cột) & nbsp; trục (trái ngược với & nbsp; ________ 92 & nbsp; sắp xếp dọc theo & nbsp; nội tuyến (hàng) & nbsp; trục). Giá trị này áp dụng cho tất cả các mục lưới bên trong container.

Values:

• ________ 150 & nbsp; - lấp đầy toàn bộ chiều cao của ô (đây là mặc định) – fills the whole height of the cell (this is the default)
• ________ 147 & nbsp; - Căn chỉnh các mục được xả với cạnh bắt đầu của ô của chúng – aligns items to be flush with the start edge of their cell
• ________ 148 & nbsp; - Căn chỉnh các mục được xả với cạnh cuối của ô của chúng – aligns items to be flush with the end edge of their cell
• ________ 149 & nbsp; - Sắp xếp các mục ở trung tâm của ô của chúng – aligns items in the center of their cell
• ________ 150 & nbsp; - lấp đầy toàn bộ chiều rộng của ô (đây là mặc định) – align items along text baseline. There are modifiers to

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  57 —

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  59 and

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  60 which will use the baseline from the first or last line in the case of multi-line text.

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

Examples:

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

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

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

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

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

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

This behavior can also be set on individual grid items via the 

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Sắp xếp các mục lưới dọc theo & nbsp; block (cột) & nbsp; trục (trái ngược với & nbsp; ________ 92 & nbsp; sắp xếp dọc theo & nbsp; nội tuyến (hàng) & nbsp; trục). Giá trị này áp dụng cho tất cả các mục lưới bên trong container.

place-items

________ 150 & nbsp; - lấp đầy toàn bộ chiều cao của ô (đây là mặc định)

Values:

• <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  57 - Căn chỉnh các mục dọc theo đường cơ sở văn bản. Có các sửa đổi thành

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  57-

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  59 và

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  60 sẽ sử dụng đường cơ sở từ dòng đầu tiên hoặc cuối cùng trong trường hợp văn bản đa dòng. – The first value sets 

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

  3, the second value 

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

  2. If the second value is omitted, the first value is assigned to both properties.

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

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

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

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

Ngoài ra còn có các từ khóa sửa đổi

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

place-content

________ 94 & nbsp; đặt cả & nbsp; ________ 93 & nbsp; và & nbsp; ________ 92 & nbsp; thuộc tính trong một tuyên bố.

Values:

• ________ 170 & nbsp;/& nbsp; ________ 171 & nbsp; - Bộ giá trị đầu tiên & nbsp; ________ 93, giá trị thứ hai & nbsp; ________ 92. Nếu giá trị thứ hai bị bỏ qua, giá trị thứ nhất được gán cho cả hai thuộc tính. – The first value sets 

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

  6, the second value 

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

  5. If the second value is omitted, the first value is assigned to both properties.

Để biết thêm chi tiết, xem & nbsp; ________ 93 & nbsp; và & nbsp; ________ 92.

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

grid-auto-columnsgrid-auto-rows
grid-auto-rows

________ 97 & nbsp; đặt cả & nbsp; ________ 96 & nbsp; và & nbsp; ________ 95 & nbsp; thuộc tính trong một tuyên bố.

Values:

• ________ 179 & nbsp;/& nbsp; ________ 180 & nbsp; - Bộ giá trị đầu tiên & nbsp; ________ 96, giá trị thứ hai & nbsp; ________ 95. Nếu giá trị thứ hai bị bỏ qua, giá trị thứ nhất được gán cho cả hai thuộc tính. – can be a length, a percentage, or a fraction of the free space in the grid (using the 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  05 unit)

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Tất cả các trình duyệt chính ngoại trừ Edge hỗ trợ & nbsp; ________ 97 & nbsp; tài sản tốc ký.

This creates a 2 x 2 grid.

Chỉ định kích thước của bất kỳ rãnh lưới được tạo tự động nào (AKA & NBSP; Các bản nhạc lưới ẩn). Các bản nhạc ngầm được tạo ra khi có nhiều mục lưới hơn các ô trong lưới hoặc khi một mục lưới được đặt bên ngoài lưới rõ ràng. (Xem & NBSP; sự khác biệt giữa lưới rõ ràng và ẩn)

We told .item-b to start on column line 5 and end at column line 6, but we never defined a column line 5 or 6. Because we referenced lines that don’t exist, implicit tracks with widths of 0 are created to fill in the gaps. We can use 

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

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

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

grid-auto-flow

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

Values:

• .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  2 Điều này tạo ra một lưới 2 x 2. – tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary (default)
• Nhưng bây giờ hãy tưởng tượng bạn sử dụng & nbsp; ________ 78 & nbsp; và & nbsp; – tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary

• .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  3we đã nói với .Item-B để bắt đầu trên dòng cột 5 và kết thúc ở dòng cột 6, & nbsp; nhưng chúng tôi không bao giờ xác định một dòng cột 5 hoặc 6. bởi vì chúng tôi đã tham khảo các dòng không tồn tại, các bản nhạc ngầm có chiều rộng 0 được tạo Để điền vào các khoảng trống. Chúng ta có thể sử dụng & nbsp; ________ 98 & nbsp; và & nbsp; ________ 99 & nbsp; để chỉ định độ rộng của các bản nhạc ngầm này: – tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Nếu bạn có các vật phẩm lưới mà bạn không đặt rõ ràng trên lưới, & NBSP; Thuật toán tự động sắp xếp & NBSP; sẽ tự động đặt các mục. Thuộc tính này kiểm soát cách thức hoạt động của thuật toán đặt tự động.dense only changes the visual order of your items and might cause them to appear out of order, which is bad for accessibility.

Examples:

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

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Bạn xác định một lưới với năm cột và hai hàng, và set & nbsp; ________ 100 & nbsp; to & nbsp; ________ 192 & nbsp; (cũng là mặc định):

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Khi đặt các mục trên lưới, bạn chỉ chỉ định các điểm cho hai trong số chúng:

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Bởi vì chúng tôi đã đặt & nbsp; ____ ____ 100 & nbsp; to & nbsp; ____ 192, lưới của chúng tôi sẽ trông như thế này. Lưu ý cách ba mục chúng tôi đã đặt (mục-b, & nbsp; item-c & nbsp; và & nbsp; item-d) chảy trên các hàng có sẵn:item-b, item-c and item-d) flow across the available rows:

Nếu chúng tôi thay vào đó đặt & nbsp;item-b, item-c and item-d flow down the columns:

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Lưới

Một tốc ký để thiết lập tất cả các thuộc tính sau trong một tuyên bố duy nhất: & nbsp; ____ ____ 77, & nbsp; ________ 76, & nbsp; thuộc tính lưới trong một khai báo lưới đơn).

Values:

• ________ 114 & nbsp;-Đặt tất cả các tài sản phụ thành các giá trị ban đầu của chúng. – sets all sub-properties to their initial values.
• ________ 208 & nbsp; - hoạt động giống như & nbsp; ________ 88 & nbsp; tốc ký. – works the same as the 

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

  8 shorthand.
• ________ 210 & nbsp; - Bộ & nbsp; ________ 77 & nbsp; đến giá trị được chỉ định. Nếu & nbsp; ____ ____ 212 & nbsp; từ khóa ở bên phải của chém, nó sẽ đặt & nbsp; ____ ____ 100 & nbsp; to & nbsp; ________ 193. Nếu & nbsp; ________ 194 & nbsp; từ khóa được chỉ định bổ sung, thuật toán đặt tự động sử dụng thuật toán đóng gói dày đặc. Nếu & nbsp; ________ 98 & nbsp; bị bỏ qua, nó được đặt thành & nbsp; ________ 217. – sets 

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

  7 to the specified value. If the 

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

  12 keyword is to the right of the slash, it sets 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  00 to 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  93. If the 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  94 keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If 

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

  8 is omitted, it is set to 

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

  17.
• ________ 218 & nbsp; - Bộ & nbsp; ________ 76 & nbsp; đến giá trị được chỉ định. Nếu & nbsp; ____ ____ 212 & nbsp; từ khóa ở bên trái của chém, nó sẽ đặt & nbsp; ____ ____ 100 & nbsp; to & nbsp; ________ 192. Nếu & nbsp; ________ 194 & nbsp; từ khóa được chỉ định bổ sung, thuật toán đặt tự động sử dụng thuật toán đóng gói dày đặc. Nếu & nbsp; ________ 99 & nbsp; bị bỏ qua, nó được đặt thành & nbsp; ________ 217. – sets 

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

  6 to the specified value. If the 

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

  12 keyword is to the left of the slash, it sets 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  00 to 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  92. If the 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  94 keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If 

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

  9 is omitted, it is set to 

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

  17.

Examples:

Hai khối mã sau đây tương đươ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];
}

Hai khối mã sau đây tương đươ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];
}

Hai khối mã sau đây tương đươ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];
}

Và hai khối mã sau đây là tương đươ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];
}

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 & nbsp; ________ 87, & nbsp; ________ 77 & nbsp; và & nbsp; ________ 76, và tất cả các tài sản phụ khác được đặt thành các giá trị ban đầu của chúng. Những gì bạn làm là chỉ định tên dòng và theo dõi kích thước nội tuyến với các khu vực lưới tương ứng của chúng. Điều này là dễ nhất để mô tả với một ví dụ:

.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];
}

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

.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];
}

Thuộc tính cho trẻ em (các mặt hàng lưới)
(Grid Items)

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

  29

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

  30

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

  29

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

  32

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

  29

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

  34

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

  29

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

  36

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

  29

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

  8

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

  8

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

  29

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

  9

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

  9

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

  29

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  10

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  10

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

  29

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  51

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  51

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

  29

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  61

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  61

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

  29

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

  48

________ 249, & nbsp; ________ 250, & nbsp; ________ 251, & nbsp; ________ 252 & nbsp; và & nbsp;

Grid-Column-startgrid-m-endgrid-row-startgrid-row-end
grid-column-end
grid-row-start
grid-row-end

Xác định vị trí của mục lưới trong lưới bằng cách tham khảo các dòng lưới cụ thể.

Values:

• ________ 258 & nbsp; - Có thể là một số để chỉ một đường lưới được đánh số hoặc một tên để tham khảo một dòng lưới được đặt tên – can be a number to refer to a numbered grid line, or a name to refer to a named grid line

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

  59 - Mục sẽ trải dài trên số lượng đường ray được cung cấp – the item will span across the provided number of grid tracks

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

  60 - Mục sẽ trải qua cho đến khi nó đạt dòng tiếp theo với tên được cung cấp – the item will span across until it hits the next line with the provided name

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

  17-biểu thị vị trí tự động, khoảng tự động hoặc nhịp mặc định của một – indicates auto-placement, an automatic span, or a default span of one

.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];
}

Examples:

.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];
}

.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];
}

.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];
}

If no 

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

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

Các mục có thể chồng chéo lẫn nhau. Bạn có thể sử dụng & nbsp; ____ ____ 264 & nbsp; để kiểm soát thứ tự xếp chồng của họ.

Tìm hiểu thêm về ký hiệu

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

grid-columngrid-row
grid-row

Tốc ký cho & nbsp; ________ 254 & nbsp;+& nbsp; ________ 256, và & nbsp; ________ 255 & nbsp;

Values:

• ________ 270 & nbsp;/& nbsp; ________ 271 & nbsp; - Mỗi – each one accepts all the same values as the longhand version, including span

.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];
}

Example:

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

If no end line value is declared, the item will span 1 track by default.

grid-area

Đặt một mục một tên để nó có thể được tham chiếu bởi một mẫu được tạo bằng & nbsp; ________ 87 & nbsp; Ngoài ra, thuộc tính này có thể được sử dụng như một tốc ký thậm chí ngắn hơn cho & nbsp; ________ 255 & nbsp;+& nbsp; ________ 254 & nbsp;

Values:

• ________ 277 & nbsp; - một tên bạn chọn – a name of your choosing
• ________ 278 & nbsp;/& nbsp; ________ 279 & nbsp;/& nbsp; – can be numbers or named lines

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

Examples:

Như một cách để gán tên cho mục:

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

Như là Shorthand Shorthand cho & nbsp; ________ 255 & nbsp;+& nbsp; ________ 254 & nbsp;+& nbsp;

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

justify-self

Sắp xếp một mục lưới bên trong một ô dọc theo & nbsp; nội tuyến (hàng) & nbsp; trục (trái ngược với & nbsp; ____ ____ 161 & nbsp; sắp xếp dọc theo & nbsp; khối (cột) & nbsp; trục). Giá trị này áp dụng cho một mục lưới bên trong một ô duy nhất.

Values:

• ________ 147 & nbsp; - Căn chỉnh vật phẩm lưới được xả với cạnh bắt đầu của ô – aligns the grid item to be flush with the start edge of the cell
• ________ 148 & nbsp; - Căn chỉnh vật phẩm lưới được xả với cạnh cuối của ô – aligns the grid item to be flush with the end edge of the cell
• ________ 149 & nbsp; - Sắp xếp mục lưới ở trung tâm của ô – aligns the grid item in the center of the cell
• ________ 150 & nbsp; - lấp đầy toàn bộ chiều rộng của ô (đây là mặc định) – fills the whole width of the cell (this is the default)

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

Examples:

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

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

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

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

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

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

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

To set alignment for all the items in a grid, this behavior can also be set on the grid container via the 

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

align-self

Sắp xếp một mục lưới bên trong một ô dọc theo & nbsp; khối (cột) & nbsp; trục (trái ngược với & nbsp; ________ 151 & nbsp; sắp xếp dọc theo & nbsp; nội tuyến (hàng) & nbsp; trục). Giá trị này áp dụng cho nội dung bên trong một mục lưới duy nhất.

Values:

• ________ 147 & nbsp; - Căn chỉnh vật phẩm lưới được xả với cạnh bắt đầu của ô – aligns the grid item to be flush with the start edge of the cell
• ________ 148 & nbsp; - Căn chỉnh vật phẩm lưới được xả với cạnh cuối của ô – aligns the grid item to be flush with the end edge of the cell
• ________ 149 & nbsp; - Sắp xếp mục lưới ở trung tâm của ô – aligns the grid item in the center of the cell
• ________ 150 & nbsp; - lấp đầy toàn bộ chiều rộng của ô (đây là mặc định) – fills the whole height of the cell (this is the default)

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

Examples:

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

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

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

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

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

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

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

To align all the items in a grid, this behavior can also be set on the grid container via the 

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

place-self

Sắp xếp một mục lưới bên trong một ô dọc theo & nbsp; khối (cột) & nbsp; trục (trái ngược với & nbsp; ________ 151 & nbsp; sắp xếp dọc theo & nbsp; nội tuyến (hàng) & nbsp; trục). Giá trị này áp dụng cho nội dung bên trong một mục lưới duy nhất.

Values:

• ________ 150 & nbsp; - lấp đầy toàn bộ chiều cao của ô (đây là mặc định) – The “default” alignment for the layout mode.

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

  0

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

  1

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

  2

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

  3 để align & nbsp; all & nbsp; các mục trong lưới, hành vi này cũng có thể được đặt trên thùng chứa lưới thông qua & nbsp; ________ 93 & nbsp; thuộc tính. – The first value sets 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  61, the second value 

  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>

  51. If the second value is omitted, the first value is assigned to both properties.

Examples:

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

All major browsers except Edge support the 

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

________ 217 & NBSP; - Căn chỉnh mặc định của người dùng cho chế độ Bố cục.

________ 302 & nbsp;/& nbsp; ________ 303 & nbsp; - Bộ giá trị đầu tiên & nbsp; ________ 161, giá trị thứ hai & nbsp; ________ 151. Nếu giá trị thứ hai bị bỏ qua, giá trị thứ nhất được gán cho cả hai thuộc tính.

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

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

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

Đơn vị và chức năng đặc biệt

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

đơn vị fr

Bạn có thể sẽ sử dụng rất nhiều đơn vị phân số trong lưới CSS, như

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

• Có nghĩa là, lỏng lẻo,

  .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  08. Ngoại trừ các giá trị tỷ lệ phần trăm đó vững chắc 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 đó, bây giờ bạn đã phá vỡ chiều rộng 100% (giả sử mô hình hộp

  .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  09). 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:
• Kích thước từ khóa
• Khi kích thước các hàng và cột, bạn có thể sử dụng tất cả & nbsp; độ dài & nbsp; bạn đã quen, như & nbsp; ____ 310, rem, %, v.v., nhưng bạn cũng có từ khóa:

• .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  11: 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ư là e e pluribus unum, thì hàm lượng tối thiểu có thể là chiều rộng của từ pluribus pluribus.

• .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  12: Kích thước tối đa của nội dung. Hãy tưởng tượng câu trên,

  .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  12 là độ dài của toàn bộ câu.

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

17: Từ khóa này rất giống với

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

05 đơn vị, ngoại trừ việc họ mất đi cuộc chiến trong việc định cỡ chống lại các đơn vị

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

05 khi phân bổ không gian còn lại.

• .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  17: 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

  .container {
    grid-template-columns: ...  ...;
    /* e.g. 
        1fr 1fr
        minmax(10px, 1fr) 3fr
        repeat(5, 1fr)
        50px auto 100px 1fr
    */
    grid-template-rows: ... ...;
    /* e.g. 
        min-content 1fr min-content
        100px 1fr max-content
    */
  }

  12.

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

• Đơn vị phân số: Xem ở trên
• Kích thước chức năng

Hàm

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

19 thực hiện chính xác những gì nó có vẻ như: nó đặt giá trị tối thiểu và tối đa cho độ dài có thể là gì. Điều này rất hữu ích cho sự 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ó lẽ là những gì bạn muốn:

Hàm

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

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

Hàm

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

• Hàm lặp lại () và từ khóa
• & Nbsp; ________ 107 & nbsp; hàm có thể lưu một số gõ:

Nhưng

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

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

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

MASONRY

Một tính năng thử nghiệm của CSS Grid là Bố cục Masonry. Lưu ý rằng có rất nhiều cách tiếp cận với CSS Masonry, nhưng chủ yếu trong số đó là mánh khóe và có những nhược điểm lớn hoặc aren những gì bạn khá mong đợi.

Thông số kỹ thuật có một cách chính thức bây giờ, và đây là đằng sau một lá cờ trong Firefox:

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

Xem bài viết Rachel Rachel để biết sâu.

Subgrid

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

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

Điều này chỉ được hỗ trợ trong Firefox ngay bây giờ, nhưng nó thực sự cần phải có được ở khắp mọi nơi.

Nó cũng hữu ích để biết về

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

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

Hỗ trợ trình duyệt lưới CSS

Máy tính để bàn

Di động / máy tính bảng

Cột chất lỏng đoạn trích

Các cột chiều rộng chất lỏng vỡ vào các cột ít nhiều vì không gian có sẵn, không có truy vấn phương tiện!

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

Hoạt hình lưới CSS

Theo thông số kỹ thuật mô -đun Lưới Lưới CSS, có 5 thuộc tính lưới hoạt hình:

• ________ 91, & nbsp; ________ 90, & nbsp; ________ 89 & nbsp; theo chiều dài, tỷ lệ phần trăm hoặc calc.
• ________ 76, & nbsp; ________ 77 & nbsp; như một danh sách đơn giản về độ dài, tỷ lệ phần trăm hoặc calc, với điều kiện là sự khác biệt duy nhất là các giá trị của các thành phần, tỷ lệ phần trăm hoặc calc trong danh sách.

Theo văn bản này, chỉ có hình ảnh động của & nbsp; ________ 332, & nbsp; ________ 333, & nbsp; ____ 334 & nbsp; được triển khai trong bất kỳ trình duyệt nào được thử nghiệm.

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

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

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

Trình duyệt Chrome

Kỹ thuật cho bố cục báo với lưới CSS và đường viền giữa các yếu tố

Video lưới CSS

Thêm nguồn lưới CSS

• Mô -đun bố cục lưới CSS Cấp 1 (W3C)
• Lưới bằng ví dụ (Rachel Andrew)
• Học cách bố trí lưới CSS (Rachel Andrew)
• Bố cục lưới CSS: Giới thiệu (DigitalOcean)
• Bố cục lưới CSS: ký hiệu lặp lại (DigitalOcean)
• Bố cục lưới CSS: Từ khóa Span (DigitalOcean)
• Bố cục lưới CSS: Đơn vị FR (DigitalOcean)
• CSS Grid: Bố trí Grail Holy (DigitalOcean)
• Cách sử dụng các thuộc tính lưới CSS để biện minh và sắp xếp nội dung và các mục (DigitalOcean)