lưới-mẫu-cột | Thủ thuật CSS – cột mẫu lưới css

Thuộc tính CSS grid-template-column là một phần của CSS Grid Layout specification , xác định các cột của a vùng chứa lưới bằng cách chỉ định kích thước của các đường lưới và tên đường của nó.

  .sidebar-layout {
  hiển thị: lưới;
  lưới-mẫu-cột: 300px 1fr;
}  

Cần lưu ý sự khác biệt giữa đường lưới và đường lưới khi chúng tôi tìm hiểu kỹ thuộc tính grid-template-column . Đường lưới đề cập đến tên của các đường xác định các cột và hàng của lưới. Đường lưới đề cập đến độ dài khoảng cách giữa các đường lưới.

Cú pháp

  grid-template-column: none | & lt; track-list & gt; | & lt; danh sách theo dõi tự động & gt; | subgrid & lt; line-name-list & gt ;?  

Định nghĩa đầy đủ

  trong đó:
& lt; track-list & gt; = [& lt; tên dòng & gt ;? [& lt; track-size & gt; | & lt; theo dõi-lặp lại & gt; ]] + & lt; tên dòng & gt ;?
& lt; danh sách theo dõi tự động & gt; = [& lt; tên dòng & gt ;? [& lt; fixed-size & gt; | & lt; fixed-repeat & gt; ]] * & lt; tên dòng & gt ;? & lt; tự động lặp lại & gt;
[& lt; tên dòng & gt ;? [& lt; fixed-size & gt; | & lt; fixed-repeat & gt; ]] * & lt; tên dòng & gt ;?
& lt; line-name-list & gt; = [& lt; tên dòng & gt; | & lt; tên-lặp lại & gt; ] +

ở đâu:
& lt; tên dòng & gt; = '[' & lt; danh tính tùy chỉnh & gt; * ']'
& lt; track-size & gt; = & lt; track-width & gt; | minmax (& lt; không linh hoạt-độ rộng & gt;, & lt; theo dõi-độ rộng & gt;) | fit-content ([& lt; length & gt; | & lt; phần trăm & gt;])
& lt; theo dõi-lặp lại & gt; = repeat ([& lt; integer [1, ∞] & gt;], [& lt; line-names & gt ;? & lt; track-size & gt;] + & lt; line-names & gt ;?)
& lt; fixed-size & gt; = & lt; fixed-breadth & gt; | minmax (& lt; fixed-breadth & gt;, & lt; track-breadth & gt;) | minmax (& lt; không linh hoạt-độ rộng & gt;, & lt; độ rộng cố định & gt;)
& lt; fixed-repeat & gt; = repeat ([& lt; integer [1, ∞] & gt;], [& lt; line-names & gt ;? & lt; fixed-size & gt;] + & lt; line-names & gt ;?)
& lt; tự động lặp lại & gt; = repeat ([auto-fill | auto-fit], [& lt; line-names & gt ;? & lt; fixed-size & gt;] + & lt; line-names & gt ;?)

ở đâu:
& lt; track-breadth & gt; = & lt; length-phần trăm & gt; | & lt; flex & gt; | nội dung tối thiểu | nội dung tối đa | Tự động
& lt; không linh hoạt-bề rộng & gt; = & lt; chiều dài & gt; | & lt; phần trăm & gt; | nội dung tối thiểu | nội dung tối đa | Tự động
& lt; fixed-breadth & gt; = & lt; length-phần trăm & gt;  

• Giá trị ban đầu: none
• Áp dụng cho: vùng chứa lưới
• Được kế thừa: không
• Giá trị được tính toán : như đã chỉ định, nhưng với độ dài tương đối được chuyển đổi thành độ dài tuyệt đối < / li>
• Loại hoạt ảnh: danh sách đơn giản về độ dài, phần trăm hoặc calc, với điều kiện sự khác biệt duy nhất là các giá trị của các thành phần độ dài, phần trăm hoặc calc trong danh sách.

  / * Giá trị từ khóa * /
lưới-mẫu-cột: không có;

/ * & lt; track-list & gt; giá trị * /
lưới-mẫu-cột: 200px 1fr 180px;
lưới-mẫu-cột: [linename col1] 250px [line2];
lưới-mẫu-cột: [thanh bên] 1fr [nội dung] 2fr;
lưới-mẫu-cột: phù hợp-nội dung (50%);
lưới-mẫu-cột: minmax (200px, 1fr) minmax (100px, 1fr);
lưới-mẫu-cột: lặp lại (4, 1fr);
lưới-mẫu-cột: subgrid;
lưới-mẫu-cột: khối xây;

/ * & lt; danh sách theo dõi tự động & gt; giá trị * /
lưới-mẫu-cột: lặp lại 100px (tự động điền, 100px) 200px;
lưới-mẫu-cột: lặp lại 100px (tự động 2, 1fr) lặp lại 200px (3, 5fr);
lưới-mẫu-cột: độ lặp lại tối thiểu (150px, max-content) (tự động điền, 180px) 15%;
lưới-mẫu-cột: [col1] 100px [col1-end] lặp lại (tự động điều chỉnh, [line3] 400px);

/ * Giá trị toàn cầu * /
lưới-mẫu-cột: kế thừa;
lưới-mẫu-cột: ban đầu; / * giống như `none` * /
lưới-mẫu-cột: hoàn nguyên;
lưới-mẫu-cột: unset;  

  .grid {
  hiển thị: lưới;
  chiều rộng: 900px;
  lưới-mẫu-cột: 300px 1fr 2fr;
}  

  1fr = ([Chiều rộng vùng chứa lưới] - [Chiều rộng cột cố định]) / [Tổng các hệ số linh hoạt]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px  

  .grid {
  hiển thị: lưới;
  chiều rộng: 900px;
  lưới-mẫu-cột: 300px 1fr 2fr;
  khoảng cách: 15px;
}  

  1fr = ([Chiều rộng vùng chứa lưới] - [Khoảng cách] - [Chiều rộng cột cố định]) / [Tổng của yếu tố flex]
1fr = (900px - 30px - 300px) / 3
1fr = 570px / 3
1fr = 190px  

  grid-template-column: 200px minmax (100px, 400px);  

Các đối số min và max chấp nhận tất cả các giá trị sau, ngoại trừ giá trị min không được là giá trị flex (ví dụ: < mã> 1fr ):

  & lt; length-phần trăm & gt; | & lt; flex & gt; | nội dung tối thiểu | nội dung tối đa | tự động  

Vì vậy, giá trị này không hợp lệ vì giá trị min là giá trị flex:

  grid-template-column: minmax (1fr, 500px) 3fr;  

Nhưng những điều này hoàn toàn hợp lệ:

  grid-template-column: minmax (auto, 1fr) 3fr;
lưới-mẫu-cột: minmax (200%, 1fr) 1fr;  

auto

Từ khóa auto hoạt động tương tự như minmax (min-content, max-content) trong hầu hết các trường hợp.

Vì kích thước bản nhạc auto có thể được kéo dài bởi align-content và justify-content thuộc tính mà chúng sẽ chiếm bất kỳ không gian còn lại nào trong vùng chứa lưới theo mặc định (bạn biết đấy, auto -matically). Điều đó có nghĩa là, kích thước theo dõi auto không thể thắng trong cuộc chiến chống lại các đơn vị fr khi phân bổ không gian còn lại – chúng điều chỉnh theo kích thước tối đa của nội dung.

Hãy xem kết quả của hai ví dụ theo dõi sau:

  grid-template-column: auto auto auto;
lưới-mẫu-cột: auto 1fr auto;  

Khi tất cả ba cột được đặt thành auto (mà chúng tôi cũng có thể viết là lặp lại (3, auto) – nhưng sẽ có nhiều hơn sau đó), tất cả chúng sẽ làm là chia sẻ không gian bình đẳng. Nhưng khi chúng ta thả một đơn vị phân số vào giữa làm cột thứ hai, các cột auto chỉ rộng bằng nội dung bên trong chúng và cột 1fr chiếm không gian còn lại .

Thể hiện hoạt động của đơn vị fr bên cạnh đường dẫn tự động

Từ khóa min-content đại diện cho lượng không gian nhỏ nhất có thể mà một phần tử có thể sử dụng trong vùng chứa lưới mà không làm tràn nội dung của nó. Nội dung có thể là văn bản, hình ảnh hoặc video.

Giả sử nội dung là “CSS thật tuyệt vời”. min-content là chiều rộng của thế giới “tuyệt vời” vì đó là phần rộng nhất của nội dung (rộng hơn so với “CSS is”). Nếu cột hẹp hơn bất kỳ, thì văn bản sẽ bắt đầu tràn vùng chứa.

Trong mã, nó trông giống như sau:

  .grid {
  hiển thị: lưới;
  lưới-mẫu-cột: min-content 1fr;
  khoảng trống: 1rem;
}  

… dẫn đến kết quả như thế này:

Thể hiện hoạt động của từ khóa min-content trong bố cục lưới

Từ khóa max-content đại diện cho kích thước nhỏ nhất cần thiết để một phần tử có thể vừa với tất cả nội dung của nó mà không bị bao bọc hoặc bị tràn. Tôi biết, một cái tên bao gồm “tối đa” khiến nó có vẻ như chúng ta đang xử lý kích thước tối đa, vì vậy giá trị này có thể hơi khó hiểu.

Nếu chúng tôi truy cập lại ví dụ min-content ở trên, đường lưới có giá trị kích thước là max-content sẽ phát triển cho đến khi nội dung của nó có thể vừa với một dòng. Vì vậy, trong trường hợp “CSS thật tuyệt vời” thì max-content vẫn chiếm nhiều không gian mà ba từ đó chiếm cùng nhau trên một dòng.

  .grid {
  hiển thị: lưới;
  lưới-mẫu-cột: max-content 1fr;
  khoảng trống: 1rem;
}  

Thể hiện hoạt động của từ khóa max-content trong bố cục lưới

Hàm fit-content () (có giải thích rõ ràng về nó trong Hướng dẫn về Hàm CSS của chúng tôi) sử dụng không gian có sẵn và chấp nhận phần trăm < / code> hoặc độ dài Giá trị là kích thước tối đa được phép cho đường lưới trong khi đảm bảo đường đi không bao giờ vượt quá max-content và không bao giờ bị thu hẹp quá mức tối thiểu . Mức tối thiểu thường xuyên, nhưng không phải lúc nào cũng bằng min-content .

  .grid {
  hiển thị: lưới;
  lưới-mẫu-cột: fit-content (700px) fit-content (700px) 1fr;
  khoảng trống: 1rem;
}  

  grid-template-column: [first content-start] 1fr [content-end sidebar-start] 300px [ dòng cuối];  

Xin lưu ý rằng tên dòng là & lt; custom-Id & gt; , một loại dữ liệu chung đại diện cho bất kỳ số nhận dạng CSS hợp lệ nào sẽ không bị hiểu sai thành từ khóa được xác định trước trong định nghĩa giá trị của thuộc tính đó . Vì vậy, chúng tôi có thể đặt tên cho một dòng super-awesome-spider-Monkey nhưng không có giá trị CSS chung nào có thể gây ra xung đột, như span , auto , < mã> kế thừa , tên đầu tiên , v.v..

Ngoài ra, các số nhận dạng như vậy hoàn toàn có phân biệt chữ hoa chữ thường . Ví dụ: CSS coi sidebar-end và Sidebar-Name là hai tên dòng hoàn toàn khác nhau, không liên quan. Ngoài ra, tên dòng có thể được chỉ định rõ ràng với thuộc tính grid-template-column hoặc được gán ngầm bởi các vùng lưới được đặt tên với thuộc tính grid-template-area .

Hàm repeat () là một cách hiệu quả để xác định số lượng lưới-mẫu-cột khi các cột giống nhau. Hàm lấy số lượng cột, theo sau là kích thước cột:

  / * Viết cái này * /
lưới-mẫu-cột: 1fr 1fr 1fr 1fr 1fr;

/ * giống như thế này: * /
lưới-mẫu-cột: lặp lại (5, 1fr);  

Một ví dụ khác, lần này là từ đặc điểm kỹ thuật :

  grid-template-column: 10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end] 10px;

/ * tương tự các S ở trên, ngoại trừ dễ viết hơn * /
lưới-mẫu-cột: lặp lại (4, 10px [col-start] 250px [col-end]) 10px;  

auto-fill và auto-fit

  / * Điều này không hợp lệ * /
lưới-mẫu-cột: lặp lại (4, 1fr lặp (5, 1fr));  

  / * Điều này không hợp lệ * /
lưới-mẫu-cột: lặp lại (tự động điều chỉnh, 1fr);  

  / * Chúng không hợp lệ * /
lưới-mẫu-cột: lặp lại (tự động điều chỉnh, 1fr);
lưới-mẫu-cột: lặp lại (nội dung tối thiểu, 1fr);

/ * Điều này hợp lệ * /
lưới-mẫu-cột: lặp lại (6, 1fr);  

  / * Chúng không hợp lệ * /
lưới-mẫu-cột: lặp lại (tự động điền, tối thiểu (10rem, 1fr)) lặp lại 100px (tự động điền, tối thiểu (5rem, tự động));
lưới-mẫu-cột: lặp lại (tự động điền, tối thiểu (10rem, 1fr)) lặp lại 100px (3, 1fr);

/ * Điều này hợp lệ * /
lưới-mẫu-cột: lặp lại (tự động điền, tối thiểu (10rem, 1fr)) lặp lại 100px (3, 200px);  

  .grid-container {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (4, 1fr);
}
.grid-container .grid-item {
  hiển thị: lưới;
}  

  .grid-container {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (4, 1fr);
  khoảng trống: 1rem;
}
.grid-container .grid-item {
  hiển thị: lưới;
  lưới-mẫu-cột: subgrid;
}  

  & lt; div class = "grid" & gt;
  & lt; div class = "item" & gt; & lt; / div & gt;

  & lt; div class = "item subgrid" & gt;
    & lt; div class = "subitem" & gt; & lt; / div & gt;
    & lt; div class = "subitem" & gt; & lt; / div & gt;
  & lt; / div & gt;

  & lt; div class = "item" & gt; & lt; / div & gt;
  & lt; div class = "item" & gt; & lt; / div & gt;
& lt; / div & gt;  

  .grid {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (4, 1fr); / * Thiết lập lưới có 4 rãnh * /
}
.mục {
  lưới-cột: 1 / -1; / * Làm cho tất cả các mục rộng bằng 4 bản nhạc * /
}
.subgrid {
  hiển thị: lưới;
  lưới-mẫu-cột: subgrid;
  lưới-cột: 3 / -1; / * Tạo kích thước mục trong lưới con, bằng một nửa các mục khác * /
}  

  .grid-container {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (4, 1fr);
  khoảng trống: 1rem; / * Điều này được kế thừa bởi lưới con * /
}
.grid-container .grid-item {
  hiển thị: lưới;
  lưới-mẫu-cột: subgrid;
  khoảng trống: 0,5rem; / * Điều này ghi đè khoảng trống của lưới mẹ * /
}  

 .grid-container .grid-item {
  hiển thị: lưới;
  lưới-mẫu-cột: subgrid [sidebar-start] [sidebar-end] [main-start] [main-last];
}  

  .grid-container .grid-item {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại lưới con (2, [a] 1fr [b]);
}  

  / * Những thứ này tương đương * /
lưới-mẫu-cột: lặp lại (2, [a] 1fr [b]);
lưới-mẫu-cột: [a] 1fr [b a] 1fr [b];  

  .container {
  hiển thị: lưới;
  lưới-mẫu-cột: khối xây;
  lưới-mẫu-hàng: lặp lại (4, 1fr);
}  

  .layout {
  hiển thị: lưới;
  lưới-mẫu-cột: 1fr 250px;
}  

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

  grid-template-column: max-content 1fr;  

  grid-template-column: 1fr 1fr 1fr;  

  grid-template-column: minmax (0, 1fr) minmax (0, 1fr) minmax (0, 1fr );