grid-template-columns

Try it

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<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>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

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

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

Cú pháp

/* Giá trị từ khóa */
grid-template-columns: none;

/* Giá trị <track-list> */
grid-template-columns: 100px 1fr;
grid-template-columns: [line-name] 100px;
grid-template-columns: [line-name1] 100px [line-name2 line-name3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* Giá trị <auto-track-list> */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-columns:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

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

Giá trị

none

Chỉ ra rằng không có lưới tường minh. Tất cả các cột sẽ được tạo ẩn và kích thước của chúng sẽ được xác định bởi thuộc tính grid-auto-columns.

[line-name]

Một <custom-ident> chỉ định tên cho đường ở vị trí đó. Định danh có thể là bất kỳ chuỗi hợp lệ nào ngoài các từ dành riêng span và auto. Các đường có thể có nhiều tên cách nhau bởi dấu cách trong dấu ngoặc vuông, ví dụ [line-name-a line-name-b].

<length>

Một độ dài không âm, xác định chiều rộng của cột.

<percentage>

Một giá trị <percentage> không âm tương đối so với kích thước inline của vùng chứa lưới. Nếu kích thước vùng chứa lưới phụ thuộc vào kích thước của các track, trình duyệt xử lý phần trăm như auto. Trình duyệt có thể điều chỉnh đóng góp kích thước nội tại của track vào kích thước vùng chứa lưới và có thể tăng kích thước cuối cùng của track bằng lượng tối thiểu để thỏa mãn phần trăm đó.

<flex>

Là một đơn vị không âm với đơn vị fr chỉ định hệ số flex của track. Mỗi track có kích thước <flex> chiếm một phần không gian còn lại tỷ lệ với hệ số flex của nó.

Khi xuất hiện ngoài ký hiệu minmax(), nó ngụ ý một giá trị tối thiểu tự động (tức là minmax(auto, <flex>)).

max-content

Là từ khóa đại diện cho đóng góp nội dung tối đa lớn nhất của các phần tử lưới chiếm track lưới. Ví dụ, nếu phần tử đầu tiên của track lưới chứa câu "Repetitio est mater studiorum" và phần tử thứ hai chứa câu "Dum spiro, spero", đóng góp nội dung tối đa sẽ được xác định bởi kích thước câu lớn nhất trong tất cả các phần tử lưới - "Repetitio est mater studiorum".

min-content

Là từ khóa đại diện cho đóng góp nội dung tối thiểu lớn nhất của các phần tử lưới chiếm track lưới. Ví dụ, nếu phần tử đầu tiên của track lưới chứa câu "Repetitio est mater studiorum" và phần tử thứ hai chứa câu "Dum spiro, spero", đóng góp nội dung tối thiểu sẽ được xác định bởi kích thước từ lớn nhất trong tất cả các câu trong các phần tử lưới - "studiorum".

minmax(min, max)

Là ký hiệu hàm định nghĩa khoảng kích thước lớn hơn hoặc bằng min và nhỏ hơn hoặc bằng max. Nếu max nhỏ hơn min, thì max bị bỏ qua và hàm được xử lý như min. Là giá trị tối đa, một giá trị <flex> đặt hệ số flex của track. Không hợp lệ khi là giá trị tối thiểu.

auto

Là giá trị tối đa, đại diện cho kích thước max-content lớn nhất của các phần tử trong track đó.

Là giá trị tối thiểu, đại diện cho kích thước tối thiểu lớn nhất của các phần tử trong track đó (được chỉ định bởi các thuộc tính min-width/min-height của các phần tử). Điều này thường tương ứng với kích thước min-content, nhưng không phải lúc nào cũng vậy.

Nếu được dùng ngoài ký hiệu minmax(), auto đại diện cho khoảng giữa giá trị tối thiểu và tối đa được mô tả ở trên. Trong hầu hết các trường hợp, điều này hoạt động tương tự như minmax(min-content,max-content).

Note: Kích thước track auto (và chỉ kích thước track auto) có thể được kéo dãn bởi các thuộc tính align-content và justify-content. Do đó, mặc định, một track có kích thước auto sẽ chiếm bất kỳ không gian còn lại nào trong vùng chứa lưới.

fit-content( [ <length> | <percentage> ] )

Biểu diễn công thức max(minimum, min(limit, max-content)), trong đó minimum đại diện cho giá trị tối thiểu auto (thường nhưng không phải lúc nào cũng bằng giá trị tối thiểu min-content), và limit là hàm kích thước track được truyền vào làm đối số của fit-content(). Về cơ bản đây là giá trị nhỏ hơn trong minmax(auto, max-content) và minmax(auto, limit).

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Biểu diễn một đoạn lặp của danh sách track, cho phép viết gọn hơn một số lượng lớn các cột có mẫu lặp lại.

masonry

Giá trị masonry chỉ ra rằng trục này nên được bố cục theo thuật toán masonry.

subgrid

Giá trị subgrid chỉ ra rằng lưới sẽ áp dụng phần span của lưới cha trên trục đó. Thay vì được chỉ định rõ ràng, kích thước của các hàng/cột lưới sẽ được lấy từ định nghĩa của lưới cha.

Định nghĩa hình thức

Cú pháp hình thức

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

<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> ]+  

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

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

<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>+ )  

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

<integer> = 
  <number-token>  

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

Ví dụ

Chỉ định kích thước cột lưới

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• grid-template-rows
• grid-template-areas
• grid-template
• Khái niệm cơ bản của bố cục lưới: track lưới
• Video: Defining a grid
• Subgrid