grid-template-rowsVe grid-template-columnseleman bir ızgara içerik (bir kez özellikleri, bir ızgara düzeni kurulması için birinci CSS özellikleri vardır display: grid;).
Orada da -ms-grid-columnsve -ms-grid-rowsbu eski IE sürümü olan. Çağrınızı almak veya almamak için Otomatik ön sabitlemeyi düşünebilirsiniz. Orada olduklarını garip süresi de oldu grid-definition-columnsve grid-definition-rowsama bu artık bir şey değil.
İşte Microsoft'un belgelerinden türetilen bir örnek:
.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )Bu, ızgaradaki satır / sütun sayısını ve bunların boyutlarını tanımlar.
Bu iki özellik, boşluklarla ayrılmış bir değerler listesini destekler. Her değer, bir boyut ayarlayarak yeni bir sütun / satır tanımlayacaktır. 4 değerden oluşan bir liste 4 sütun / satırla sonuçlanacaktır. Tek bir değer, tek bir sütun / satır oluşturacaktır.
Kabul değerleri uzunluğu (bu gibi maddeler bulunmaktadır pxveya em(), yüzdeleri, fraksiyonlar fr; aşağıya bakınız) auto(ya da fit-content), min-content, max-contentve minmax()ya da repeat()işlev.
Yukarıdaki kod örneğinde bunun anlamı:
- Sütun 1 ( otomatik anahtar kelime): Sütun, sütundaki içeriğe uydurulur.
- 2. Sütun ("100 piksel"): Sütun 100 piksel genişliğindedir.
- 3. Sütun ("1fr"): Sütun, kalan alanın bir kesir birimini kaplar.
- Sütun 4 ("2fr"): Sütun, kalan alanın iki kesir birimini kaplar.
- 1. Satır ("50 piksel"): Satır 50 piksel uzunluğundadır.
- 2. Sıra ("5em"): Sıra 5 ems uzunluğundadır.
- Satır 3 ( minimum içerik anahtar kelimesi): Satır, içeriğin izin vereceği kadar küçük.
- Satır 4 ( otomatik anahtar kelime): Satır, satırdaki içeriğe uydurulur.
tekrar et()
repeat()Fonksiyon özellikle bu modül için tasarlanmıştır. X kez tekrarlanan bir model tanımlamanıza izin verir. Beğen repeat(6, 1fr);. Diyelim ki birbirinden% 1'lik bir marj ile aralıklı 12 eşit genişlikte sütun yapmak istiyorsunuz; tanımlayabilirsin 1fr repeat(11, 1% 1fr). İle aynıdır 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.
Fr Birimi
frÜnite için de kullanılabilir grid-rowsve grid-columnsdeğerler. "Kullanılabilir alanın kesri" anlamına gelir. Sabit boyutlu ve içeriğe dayalı sütunları / satırları çıkardığınızda, kullanılabilir alan yüzdeleri olarak düşünün. Spesifikasyonun dediği gibi:
Kesirli alanın dağılımı, tüm 'uzunluk' veya içeriğe dayalı satır ve sütun boyutları maksimum değerlerine ulaştıktan sonra gerçekleşir.
İlişkili
CSS ızgaralarıyla ilgili her şey için en iyi kaynağımız, CSS Izgarasına İlişkin Eksiksiz Kılavuzumuzdur.
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 57 | 52 | 11 * | 16 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |