Thuộc tính CSS lưới-mẫu-cột là một phần của đặc tả Bố cục lưới CSS, xác định các cột của vùng chứa lưới bằng cách chỉ định kích thước của

Bạn đang xem: 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ị

  / * 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;  

none

Đây là giá trị mặc định . Sử dụng giá trị none có nghĩa là lưới-mẫu-cột không tạo ra các rãnh lưới rõ ràng, do đó, có nghĩa là các cột được tạo hoàn toàn (nghĩa là được tạo cho bạn mà không cần phải xác định rõ ràng chúng) và kích thước đường đi được xác định bởi grid-auto-column thuộc tính.

Lưu ý rằng, grid-template-column không phải là cách duy nhất để tạo các rãnh cột lưới rõ ràng. Nó cũng có thể được thực hiện bằng cách sử dụng thuộc tính lưới-mẫu-khu vực cho phép khu vực lưới có thể được xác định bằng các tên tùy chỉnh (ví dụ: sidebar , main , v.v.).

Sự khác biệt giữa lưới ẩn và lưới rõ ràng được tóm tắt độc đáo trong bài đăng này của Manuel Matuzovic .

Giá trị này có thể là bất kỳ độ dài CSS hợp lệ và không âm nào, chẳng hạn như px , em rem , trong số những giá trị khác để chỉ định kích thước theo dõi (tức là chiều rộng) của cột.

Đây là một giá trị không âm liên quan đến kích thước nội dòng bên trong của vùng chứa lưới. Nếu kích thước của vùng chứa lưới phụ thuộc vào kích thước của các rãnh của nó, thì tỷ lệ phần trăm phải được xử lý giống như khai báo auto .

Một nhược điểm của việc sử dụng giá trị phần trăm là nếu bạn thêm khoảng trống giữa các rãnh , kích thước của các khoảng trống sẽ được thêm vào kích thước của các rãnh mà có thể gây tràn . Sử dụng từ khóa đơn vị fr hoặc auto để định kích thước các tuyến đường và ngăn điều đó xảy ra.

Đây là một giá trị không âm được biểu thị bằng đơn vị fr và nó cho phép bạn tạo các đường lưới linh hoạt bằng cách chỉ định kích thước của đường ray dưới dạng một phần của < mạnh> không gian có sẵn trong vùng chứa lưới. Theo cách đó, khi lưới thay đổi độ rộng, các cột cũng vậy, tạo nên một lưới đáp ứng tốt hơn.

Ví dụ: hãy xem xét vùng chứa lưới ba cột có chiều rộng 900px . Giả sử chiều rộng của cột đầu tiên (bên trái) là cố định (tức là không thay đổi) ở 300px trong khi cột thứ hai chiếm một đơn vị phân số ( 1fr ) và cột thứ ba có trọng lượng bằng hai đơn vị phân số ( 2fr ):

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

Hai cột thứ hai có dạng phân số, vì vậy chúng sẽ chiếm bất kỳ không gian trống nào còn lại. Và, trong trường hợp này, không gian có sẵn là bất cứ thứ gì còn lại sau khi tính đến chiều rộng 300px cố định của cột đầu tiên. Sau đó, hai cột thứ hai chia phần còn lại theo bao nhiêu phân số mà chúng nhận được.

Trong ví dụ này, dung lượng còn lại và khả dụng là 600px (tức là 900px trừ đi 300px ). Các cột thứ hai nhận một phân số ( 1fr ) của không gian đó và cột thứ ba nhận hai phân số ( 2fr ). Hãy cùng toán-y trong giây lát để tìm ra chiều rộng của một phần nhỏ của 600px :

  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  

Aha! Một phần nhỏ là 200px . Và vì cột thứ hai là 1fr , nên nó cũng phải là 200px . Điều đó khiến chúng tôi có 400px dung lượng khả dụng ( 900px - 300px - 200px ), điều này xảy ra gấp đôi kích thước của cột thứ hai.

Nhưng hãy đợi! Còn nữa.

Hãy nhớ rằng lưới sẽ tính đến bất kỳ khoảng trống nào đã được thêm vào giữa các rãnh lưới khi tính toán lượng không gian có sẵn để phân phối cho các cột phân số. Tất nhiên, lợi ích ở đây là các cột của chúng ta sẽ không bao giờ tràn vùng chứa lưới.

Hãy thêm một khoảng trống vào ví dụ trước:

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

Tôi biết chúng tôi đã khai báo khoảng cách một lần ở đây, nhưng thực ra giống như chúng tôi đã khai báo hai khoảng cách. Đó là do có khoảng cách 15px giữa mỗi cột (một giữa Cột 1 và Cột 2 và một khoảng khác giữa Cột 2 và Cột 3). Điều đó có nghĩa là chúng ta có khoảng trống giá trị 30px trong lưới của chúng ta phải được tính vào không gian có sẵn.

  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  

Tôi không biết về bạn, nhưng tôi không muốn phải làm nhiều phép toán thủ công. Đó là điều làm cho lưới CSS trở nên tuyệt vời - tất cả đều cần thiết!

Hàm minmax () chấp nhận hai đối số: giá trị độ dài tối thiểu và giá trị độ dài lớn nhất. Và những gì nói với một vùng chứa lưới là lưới-mẫu-cột không được hẹp hơn giá trị tối thiểu, nhưng không được rộng hơn giá trị lớn nhất. Hướng dẫn của chúng tôi về các Hàm CSS có giải thích chi tiết và kỹ lưỡng hơn về cách hoạt động của hàm.

Lấy ví dụ sau:

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

Có hai cột ở đây: một cột rộng 200px và một cột khác được biểu thị bằng minmax (100px, 400px) . Trông kỳ lạ đúng không? Nhưng tất cả những gì đang nói là cột thứ hai phải chiếm ít nhất 100px dung lượng, nhưng không quá 400px sau các cột đầu tiên 200px là đã tính đến.

Nói một cách rõ ràng hơn: Miễn là có nhiều hơn 100px dung lượng trống, thì cột thứ hai có thể linh hoạt lên đến 400px nhưng phải dừng lại ở đó. Nếu không, cột có chiều rộng 100px .

Các đối số min 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 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;
}  

Trong hình bên dưới, cột đầu tiên không mở rộng quá kích thước max-content (tức là chiều rộng của các từ “fit-content (700px)” trên một dòng) - nó chỉ kéo dài ra để phù hợp với nội dung của nó. Tuy nhiên, cột thứ hai chứa nhiều nội dung hơn và sẽ ngừng kéo dài khi đạt đến chiều rộng 700px , đây là giới hạn được đặt cho hàm:

Vì vậy, những gì chúng tôi đang nói ở đây cho hai cột đầu tiên là chúng phải rộng bằng nội dung tối đa của chúng, nhưng chỉ tối đa 700px . Nếu nó có thể phù hợp với tất cả nội dung trong giới hạn đó, tuyệt vời, hãy dừng lại ở vị trí của max-content . Nếu không, hãy hiển thị nhiều nhất có thể lên đến 700px , sau đó bắt đầu chia thành các dòng bổ sung.

Mặc dù các đường lưới luôn có thể được gọi bằng tên số ẩn, chúng tôi cũng có thể đặt tên tùy chỉnh cho chúng để làm cho mã dễ hiểu hơn trong một lưới phức tạp hơn. Sau đó, mỗi tên đường có thể được tham chiếu khi định vị các mục lưới theo tên đường.

Các đường lưới có thể có nhiều hơn một tên bằng cách thêm các tên trong dấu ngoặc vuông và phân tách từng tên bằng khoảng trắng:

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

Thể hiện tên dòng và chỉ số số của bố cục lưới. Hai dòng đầu tiên có nhiều hơn một tên.

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

Ngoài một số nguyên hiển thị số lần lặp lại, hai từ khóa auto-fill auto-fit cũng được phép là đối số đầu tiên của hàm repeat () .

Trái ngược với số lần lặp lại cố định, những từ khóa này cho phép bạn hiển thị nhiều cột có kích thước nhất định phù hợp với một hàng của vùng chứa lưới.

Hai từ khóa auto-fill auto-fit khá giống nhau. Cả hai đều cố gắng tự động điều chỉnh nhiều mục lưới nhất có thể vào một cột lưới trước khi chuyển sang một dòng mới. Sự khác biệt? auto-fill lấp đầy nhiều cột nhất có thể và khi hết mục, nó sẽ để trống bất kỳ khoảng trống nào còn sót lại. Mặt khác, auto-fit sẽ tăng chiều rộng của các cột để không còn chỗ trống.

Trình bày cách auto-fill tạo các cột trống nhưng auto-fit kéo dài các cột hiện có.

Có một số hạn chế khi sử dụng hàm repeat () đáng được lưu ý:

  • Không thể lồng một hàm repeat () trong một hàm repeat () .
  / * Đ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));  
  • Nó không chấp nhận các giá trị độ dài nội tại hoặc linh hoạt (ví dụ: đơn vị fr ) khi sử dụng auto-fill hoặc auto-fit . Nó chỉ chấp nhận một kích thước theo dõi rõ ràng để có thể tính toán số lượng cột đi vào vùng chứa lưới.
  / * Đ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);  
  • Tuy nhiên, bạn có thể sử dụng và định cỡ nội tại hoặc linh hoạt làm giá trị thứ hai của hàm miễn là giá trị đầu tiên là một số dương.
  / * 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);  
  • Nó chỉ có thể được sử dụng một lần trong danh sách theo dõi grid-template-column khi sử dụng auto-fill hoặc auto-fit . Tuy nhiên, chúng ta có thể sử dụng nhiều hàm repeat () , miễn là giá trị thứ hai được cố định.
  / * 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);  

subgrid

Subgrid được coi là thử nghiệm và chỉ được hỗ trợ trong Firefox tại thời điểm viết bài này.

Chúng ta có thể có một lưới trong một lưới không? Tất nhiên chúng ta có thể! Đó là nhờ giá trị từ khóa subgrid . Khai báo điều này cho phép lưới bên trong (con) chia sẻ các đường rãnh của lưới bên ngoài (cha), cho phép tạo ra các đường theo dõi nhất quán hơn mà không cần phải khai báo lại tất cả.

Vì vậy, giả sử chúng ta có một lưới trong một lưới:

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

Chúng tôi có thể biến lưới lồng nhau đó thành một lưới con để chia sẻ các đường theo dõi giữa lưới mẹ:

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

Giờ đây, các mục của lưới con sẽ được đặt và định kích thước theo kích thước theo dõi của vùng chứa lưới chính. Ví dụ: hãy xem xét HTML sau:

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

Bây giờ chúng ta hãy tạo một mạng con:

  .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 * /
}  

Tại đây, bạn có thể thấy rằng các mục trong lưới con điều chỉnh theo kích thước đường dẫn của lưới mẹ:

Bố cục lưới con

Các khoảng trống trong một lưới con, được kế thừa bởi phần tử gốc, nhưng có thể bị ghi đè bằng một giá trị gap khác trên phần tử của lưới con:

  .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ẹ * /
}  

Một lưới con có số dòng riêng của nó. Ví dụ: khi bạn sử dụng số dòng 1 trong lưới con của mình, nó trỏ đến dòng đầu tiên của lưới con, không phải dòng cha. Vì vậy, ngay cả khi một lưới con bắt đầu trên dòng thứ ba của lưới mẹ, dòng phụ đầu tiên của lưới con vẫn sẽ là 1 chứ không phải 3 .

Và tất nhiên, chúng tôi có thể khai báo tên đường lưới tùy chỉnh trong một lưới con:

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

Ồ, và chúng ta hoàn toàn có thể sử dụng hàm repeat () tại đây để chỉ định tên dòng bản nhạc:

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

Tuy nhiên, một điều cần lưu ý là hàm repeat () kết hợp bất kỳ tên dòng phụ đề nào ở cạnh nhau.

  / * 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];  

Lưu ý rằng trong một lưới con, bạn không thể có bất kỳ dấu vết ngầm nào trong thứ nguyên đó. Vì vậy, nếu bạn thêm nhiều mục lưới hơn vào hỗn hợp, chúng sẽ được đặt trong các đường rõ ràng hiện có của lưới con. Bạn có thể xem kết quả của việc thêm một con nữa vào lưới con của ví dụ trước trong hình ảnh sau:

Subgrid không tạo ra các bản nhạc ngầm.

nề

Bạn biết chúng tôi muốn nói gì về khối xây, phải không? Đó là cách bố trí thú vị, trong đó các mục trong lưới được sắp xếp và ghép lại với nhau dựa trên không gian dọc có sẵn trong một cột. Nó đã được phổ biến nhiều năm trước bởi Thư viện JavaScript cùng tên của David DeSandro .

Bố cục khối xây

Nhờ có CSS ​​Grid, công việc xây dựng sẽ là thứ mà chúng ta có thể thực hiện được mà không cần dùng đến JavaScript. Tuy nhiên, tại thời điểm viết bài này, nó vẫn còn khá khó khăn khi là một phần của Cấp độ 3 của đặc tả Lưới CSS , hiện đang ở trong Bản nháp của Biên tập viên. Tuy nhiên, nó có sẵn trong Firefox sau một lá cờ.

Chúng tôi có thể thấy những thay đổi trong thông số kỹ thuật từ bây giờ đến thời điểm nó thực sự được phát hành. Nhưng đây là cách hiện tại của nó:

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

Ví dụ

Yay, thời gian demo! Tôi có một vài ví dụ cho thấy sức mạnh của thuộc tính grid-template-column mà bạn rất có thể gặp phải khi làm việc với bố cục CSS Grid.

Bố cục thanh bên

Có thể đạt được bố cục thanh bên đơn giản với CSS sau:

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

Và đây là kết quả:

Dự phòng nhúng CodePen

Bố cục thẻ linh hoạt và đáp ứng với số lượng mục động

Đây có thể là đoạn mã kỳ diệu nhất trong nhóm. Giả sử bạn muốn đóng gói bao nhiêu cột vào một hàng lưới trước khi nó kết thúc thành một dòng mới. Với đoạn mã này, chúng tôi kết hợp các sức mạnh của repeat () , auto-fit minmax () để thực hiện điều đó:

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

Bằng cách này, chúng tôi nhận được một số cột lặp lại (nhờ repeat () ) sẽ lấp đầy tất cả không gian có sẵn của lưới (nhờ auto-fit ) trong khi không bao giờ thu nhỏ hẹp hơn 250px và mỗi phần chiếm một phần không gian bằng nhau (nhờ minmax () ).

Dự phòng nhúng CodePen

Căn chỉnh các phần tử của biểu mẫu

Bạn đã bao giờ thấy mình phải vật lộn với CSS để có được các điều khiển biểu mẫu để xếp hàng chưa? Trường hợp cổ điển là một biểu mẫu có đầu vào văn bản xếp chồng lên nhau trong đó nhãn đầu vào ở bên trái và đầu vào ở bên phải. Khi các nhãn không đồng đều, điểm bắt đầu của các đầu vào cũng vậy, khiến mọi thứ giống như một cầu thang so le hơn là một dạng xếp chồng lên nhau.

Tuy nhiên, với CSS Grid, chúng ta có thể yêu cầu cột bên trái chứa nhãn đầu vào hiển thị ở max-content và cột bên phải chứa các đầu vào chiếm phần còn lại của không gian.

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

Không cần thêm phần tử hoặc trình bao bọc!

Dự phòng nhúng CodePen

Các cột bằng nhau

Nếu bạn sử dụng fr đơn vị để định kích thước các cột của lưới, không gian khả dụng được phân phối sau khi nội dung quyết định lượng không gian mà mỗi cột cần. Nếu bạn muốn ba cột có kích thước bằng nhau, bạn có thể nghĩ cách làm như sau:

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

Và điều đó không hoàn toàn sai! Nhưng vì kích thước tối thiểu của bố cục lưới là auto , nên nó phụ thuộc vào độ dài của nội dung để có được các cột thực sự bằng nhau. Vì vậy, chúng tôi lấy ra kích thước tối thiểu nhưng cung cấp giá trị 0 trong các hàm minmax () cho mỗi cột như sau:

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

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

Thông tin thêm

Các thủ thuật có liên quan!


Xem thêm những thông tin liên quan đến chủ đề cột mẫu lưới css

Grid template rows and grid template columns

  • Tác giả: Hichem Med
  • Ngày đăng: 2017-12-22
  • Đánh giá: 4 ⭐ ( 2092 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video is a free preview of the CSS3 Master Series: The Complete Guide to CSS Grid Layout" course.

    In this course, I will teach everything about CSS Grid layout

    GET this course at $10 (limited offer) == https://www.udemy.com/css3-master-series-the-complete-guide-to-css-grid-layout/?couponCode=CSSGRIDLAUNCH

    By the end of this course, we will create a responsive website from scratch with CSS Grid Layout!

    If you're not sure whether to take the course or not, you can watch the free preview videos.

    So I'll be waiting for you, see you soon 😉

    GET this course at $10 (limited offer) == https://www.udemy.com/css3-master-series-the-complete-guide-to-css-grid-layout/?couponCode=CSSGRIDLAUNCH

Bố cục lưới CSS: Giới thiệu

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 4853 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thuộc tính lưới-mẫu-cột CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 5 ⭐ ( 9228 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng CSS Grid để xây dựng web layout

  • Tác giả: fit.hufi.edu.vn
  • Đánh giá: 4 ⭐ ( 3057 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Chia lưới hiển thị hình ảnh dễ dàng với CSS Grid Layout – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 3 ⭐ ( 6093 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mô-đun bố cục lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế các trang...

Bố cục lưới CSS Cách sử dụng minmax () / Mã hóa

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 3 ⭐ ( 2076 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mô-đun Bố cục Lưới CSS đưa thiết kế đáp ứng lên cấp độ tiếp theo bằng cách giới thiệu một loại linh hoạt mới chưa từng thấy trước đây. Bây giờ, chúng ta không thể

Cách tạo bố cục lưới cho mô-đun Divi bằng CSS

  • Tác giả: codewatchers.com
  • Đánh giá: 3 ⭐ ( 8842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có quen với việc tạo các trang web tuyệt đẹp bằng Divi không? Bạn có thể nên biết rằng bố cục lưới là một tính năng cốt lõi của Divi Builder. Thông thường, bạn bắt đầu bằng cách tạo một hàng và...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cài đặt cấu trúc Ngăn xếp trong C/C++ - ngăn xếp

By ads_php