Lưới-mẫu-cột / lưới-mẫu-hàng - Thủ thuật CSS

Anonim

Thuộc tính grid-template-rowsvà grid-template-columnslà các thuộc tính CSS chính để thiết lập bố cục lưới, khi phần tử là một ngữ cảnh lưới ( display: grid;).

Ngoài ra còn có -ms-grid-columnsvà -ms-grid-rows, là phiên bản IE cũ của cái này. Bạn có thể muốn xem xét Tự động sửa lỗi để nhận được chúng, hoặc không, cuộc gọi của bạn. Cũng có một thời kỳ kỳ lạ nơi họ ở grid-definition-columnsvà grid-definition-rows, nhưng đó không còn là chuyện nữa.

Đây là một ví dụ lấy từ tài liệu của Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Điều này xác định số hàng / cột trong lưới cũng như thứ nguyên của chúng.

Hai thuộc tính này hỗ trợ một danh sách các giá trị được phân tách bằng dấu cách. Mỗi giá trị sẽ xác định một cột / hàng mới bằng cách đặt một thứ nguyên. Danh sách 4 giá trị sẽ dẫn đến 4 cột / hàng. Một giá trị duy nhất sẽ tạo ra một cột / hàng.

Giá trị được chấp nhận bao gồm chiều dài (như pxhay em), tỷ lệ, số thập phân ( fr; xem dưới đây), auto(hoặc fit-content), min-content, max-content, và minmax(), hoặc các repeat()chức năng.

Trong ví dụ mã ở trên, điều đó có nghĩa là:

  • Cột 1 ( từ khóa tự động ): Cột được khớp với nội dung trong cột.
  • Cột 2 (“100px”): Cột rộng 100 pixel.
  • Cột 3 (“1fr”): Cột chiếm một đơn vị phần nhỏ của không gian còn lại.
  • Cột 4 (“2fr”): Cột chiếm hai đơn vị phần nhỏ của không gian còn lại.
  • Hàng 1 (“50px”): Hàng cao 50 pixel.
  • Hàng 2 (“5em”): Hàng cao 5 em.
  • Hàng 3 ( từ khóa nội dung tối thiểu ): Hàng có kích thước nhỏ nhất là nội dung sẽ cho phép.
  • Hàng 4 ( từ khóa tự động ): Hàng phù hợp với nội dung trong hàng.

nói lại()

Các repeat()chức năng được thiết kế đặc biệt cho các mô-đun này. Nó cho phép bạn xác định một mẫu lặp lại X lần. Thích repeat(6, 1fr);. Giả sử bạn muốn tạo 12 cột có chiều rộng bằng nhau, cách nhau 1% lề; bạn có thể xác định 1fr repeat(11, 1% 1fr). Nó giống như 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Đơn vị fr

Các frđơn vị có thể được sử dụng cho grid-rowsvà grid-columnsgiá trị. Nó là viết tắt của "phần nhỏ của không gian có sẵn". Hãy coi đó là tỷ lệ phần trăm cho không gian có sẵn khi bạn loại bỏ các cột / hàng có kích thước cố định và dựa trên nội dung. Như thông số cho biết:

Việc phân phối không gian phân đoạn xảy ra sau khi tất cả các kích thước hàng và cột 'chiều dài' hoặc dựa trên nội dung đã đạt đến mức tối đa.

Có liên quan

Tài nguyên tốt nhất của chúng tôi cho tất cả mọi thứ về lưới CSS là Hướng dẫn Hoàn chỉnh về Lưới CSS.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
57 52 11 * 16 10.1

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

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 10.3