1. Web
  2. CSS
  3. Reference
  4. Properties
  5. grid

grid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Thuộc tính grid CSS là thuộc tính rút gọn đặt tất cả các thuộc tính lưới rõ ràng và ngầm định trong một khai báo duy nhất.

Sử dụng grid, bạn chỉ định một trục bằng cách sử dụng grid-template-rows hoặc grid-template-columns, sau đó chỉ định cách nội dung nên tự động lặp lại trên trục kia bằng các thuộc tính lưới ngầm định: grid-auto-rows, grid-auto-columns và grid-auto-flow.

Try it

grid: auto-flow / 1fr 1fr 1fr;

grid: auto-flow dense / 40px 40px 1fr;

grid: repeat(3, 80px) / auto-flow;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 200px;
}

#example-element :nth-child(1) {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element :nth-child(2) {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
  grid-column: auto / span 3;
  grid-row: auto / span 2;
}

#example-element :nth-child(3) {
  background-color: rgb(94 255 0 / 0.2);
  border: 3px solid green;
  grid-column: auto / span 2;
}

Note: Các thuộc tính con mà bạn không chỉ định sẽ được đặt về giá trị ban đầu, như thông thường với các thuộc tính rút gọn. Ngoài ra, các thuộc tính rãnh KHÔNG được đặt lại bởi thuộc tính rút gọn này.

Thuộc tính cấu thành

Thuộc tính này là dạng rút gọn của các thuộc tính CSS sau:

Cú pháp

css
/* Giá trị <'grid-template'> */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [line-name1] "a" 100px [line-name2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* Giá trị <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* Giá trị [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Giá trị toàn cục */
grid: inherit;
grid: initial;
grid: revert;
grid: revert-layer;
grid: unset;

Giá trị

<'grid-template'>

Xác định grid-template bao gồm grid-template-columns, grid-template-rows và grid-template-areas.

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

Thiết lập luồng tự động bằng cách đặt các track hàng rõ ràng thông qua thuộc tính grid-template-rows (và đặt thuộc tính grid-template-columns thành none) và chỉ định cách tự động lặp lại các track cột thông qua grid-auto-columns (và đặt grid-auto-rows thành auto). grid-auto-flow cũng được đặt thành column tương ứng, với dense nếu nó được chỉ định.

Tất cả các thuộc tính con grid khác được đặt lại về giá trị ban đầu.

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Thiết lập luồng tự động bằng cách đặt các track cột rõ ràng thông qua thuộc tính grid-template-columns (và đặt thuộc tính grid-template-rows thành none) và chỉ định cách tự động lặp lại các track hàng thông qua grid-auto-rows (và đặt grid-auto-columns thành auto). grid-auto-flow cũng được đặt thành row tương ứng, với dense nếu nó được chỉ định.

Tất cả các thuộc tính con grid khác được đặt lại về giá trị ban đầu.

Định nghĩa chính thức

Initial valueas each of the properties of the shorthand:
Applies togrid containers
Inheritedno
Percentagesas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
  • grid-template-rows: as specified, but with relative lengths converted into absolute lengths
  • grid-template-columns: as specified, but with relative lengths converted into absolute lengths
  • grid-template-areas: as specified
  • grid-auto-rows: the percentage as specified or the absolute length
  • grid-auto-columns: the percentage as specified or the absolute length
  • grid-auto-flow: as specified
  • grid-column-gap: the percentage as specified or the absolute length
  • grid-row-gap: the percentage as specified or the absolute length
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typeas each of the properties of the shorthand:

Cú pháp chính thức

grid = 
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>  

<grid-template> = 
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?  

<grid-template-rows> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<grid-auto-columns> = 
  <track-size>+  

<grid-auto-rows> = 
  <track-size>+  

<grid-template-columns> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<explicit-track-list> = 
  [ <line-names>? <track-size> ]+ <line-names>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<integer> = 
  <number-token>  

<fixed-breadth> = 
  <length-percentage [0,∞]>

Ví dụ

Tạo bố cục lưới

HTML

html
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Kết quả

Đặc tả

Specification
CSS Grid Layout Module Level 2
# grid-shorthand

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content