Grid-template-lajur / grid-template-baris - Trik CSS

Properti grid-template-rowsdan grid-template-columnssifat adalah sifat CSS utama untuk membuat susun atur grid, setelah elemen tersebut adalah konteks grid ( display: grid;).

Terdapat juga -ms-grid-columnsdan -ms-grid-rows, yang merupakan versi lama IE ini. Anda mungkin ingin mempertimbangkan Pembetulan Otomatis untuk mendapatkannya, atau tidak, panggilan anda. Terdapat juga masa yang pelik di mana mereka berada grid-definition-columnsdan grid-definition-rows, tetapi itu bukan perkara lagi.

Berikut adalah contoh yang berasal dari dokumentasi Microsoft:

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

Ini menentukan bilangan baris / lajur dalam grid serta dimensinya.

Kedua-dua sifat ini menyokong senarai nilai yang dipisahkan dengan spasi. Setiap nilai akan menentukan lajur / baris baru dengan menetapkan dimensi. Senarai 4 nilai akan menghasilkan 4 lajur / baris. Nilai tunggal akan menghasilkan satu lajur / baris.

Nilai diterima termasuk panjang (seperti pxatau em), peratusan, pecahan ( fr; lihat di bawah), auto(atau fit-content), min-content, max-content, dan minmax(), atau repeat()fungsi.

Dalam contoh kod di atas, ini bermaksud:

Lajur 1 ( kata kunci automatik ): Lajur dipasang pada kandungan di lajur.
Lajur 2 ("100 piksel"): Lajur selebar 100 piksel.
Lajur 3 (“1fr”): Lajur mengambil satu unit pecahan dari ruang yang tinggal.
Lajur 4 ("2fr"): Lajur mengambil dua unit pecahan dari ruang yang tinggal.

Baris 1 (“50 piksel”): Baris setinggi 50 piksel.
Baris 2 (“5em”): Baris setinggi 5 ems.
Baris 3 ( kata kunci kandungan minimum ): Baris sekecil kandungan yang dibiarkan.
Baris 4 ( kata kunci automatik ): Baris dipasang pada kandungan dalam baris.

ulangi ()

Yang repeat()fungsi ini disediakan khas untuk modul ini. Ini membolehkan anda menentukan corak yang diulang X kali. Suka repeat(6, 1fr);. Katakan anda mahu melakukan 12 lajur lebar sama jarak antara satu sama lain dengan margin 1%; anda boleh menentukan 1fr repeat(11, 1% 1fr). Ia sama seperti 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Unit fr

The frunit boleh digunakan untuk grid-rowsdan grid-columnsnilai-nilai. Ia bermaksud "pecahan ruang yang ada". Anggaplah itu sebagai peratusan untuk ruang yang ada semasa anda melepas lajur / baris berukuran tetap dan berdasarkan kandungan. Seperti yang dinyatakan oleh spek:

Pembahagian ruang pecahan berlaku setelah semua 'panjang' atau ukuran baris dan lajur berdasarkan kandungan telah mencapai maksimum.

Berkaitan

Sumber terbaik kami untuk semua perkara grid CSS adalah Panduan Lengkap kami untuk CSS Grid.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.