Grid, düzenleyicilerin bir sayfada kolayca özel düzenler oluşturmasına olanak tanıyan bir stil sayfasıdır.
Kurulum[]
Kullanım[]
Izgara düzenleri, bir sayfanın masaüstü ve mobil sürümlerinde tablo kullanmak zorunda kalmadan tutarlı bir düzen elde etmek için yararlı olabilir. Sütunlarını hücrelerle doldurarak içeriğini yerleştirebileceğiniz 12 sütun ile birlikte gelir. İki veya daha fazla alt öğenin (bundan sonra hücreler) toplamı 12'den fazla sütun verirse, aşan hücreler aşağıda yeni bir satıra taşınacaktır. 13 veya daha fazla sütuna yayılan tek bir hücre kullanamazsınız. Izgara genişliği 600 pikselden azsa, tüm sütunlar tek bir sütunda birleştirilecek ve her hücre birbirinin üzerine yığılacaktır (not: kapsayıcı sorguları kullandığı için bu yalnızca modern tarayıcılarda çalışır).
Aşağıdaki örneklerde, ızgara koyu gri bir arka plana sahipken, içindeki hücreler pembe bir arka plana sahip olacaktır. Kullanılabilir her HTML ögesini, CSS sınıfını ve CSS değişkenini görmek için API bölümüne bakın.
Not: Bu örneklerde, gösteri ve görselleştirme amacıyla bazı ekstra CSS stilleri kullanıyoruz. Aşağıda gösterilen ham kodun kopyalanması, ızgaranın arka plan ve metin renkleri gibi özelliklere sahip olmasına neden olmaz.
- Örnek 1: 12 sütunun tümünü (%100) kapsayan 1 hücre.
<div class="grid">
<div class="grid__col--span-12">Bu öğe 12 sütunun tamamını kapsadığından, herhangi bir yeni kardeş öge bu kutunun/ögenin altında olacaktır.</div>
</div>
- Örnek 2: 12 sütundan 6'sını (%50) kapsayan 2 hücre.
<div class="grid">
<div class="grid__col--span-6">6 sütun</div>
<div class="grid__col--span-6">6 sütun</div>
</div>
- Örnek 3: 12 sütundan 4'ünü (%33,3) kapsayan 3 hücre.
<div class="grid">
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
</div>
- Örnek 4: 12 sütundan 3'ünü (%25) kapsayan 4 hücre.
<div class="grid">
<div class="grid__col--span-3">3 sütun</div>
<div class="grid__col--span-3">3 sütun</div>
<div class="grid__col--span-3">3 sütun</div>
<div class="grid__col--span-3">3 sütun</div>
</div>
- Örnek 5: 12 sütundan 2'sini (%16.666...) kapsayan 6 hücre.
<div class="grid">
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
</div>
- Örnek 6: 12 sütundan 1'ini (%8,333...) kapsayan 12 hücre.
<div class="grid">
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
<div class="grid__col--span-1">1 sütun</div>
</div>
- Örnek 7: 2 hücre. İlki mevcut 12 sütundan 6'sını alırken, ikincisi 10'u alır.
<div class="grid">
<div class="grid__col--span-6">6 sütun</div>
<div class="grid__col--span-10">10 sütun</div>
</div>
- Örnek 8: 2 hücre. İlki mevcut 12 sütundan 5'ini, ikincisi 9'u ve üçüncüsü 4'ü alır.
<div class="grid">
<div class="grid__col--span-5">5 sütun</div>
<div class="grid__col--span-9">9 sütun
s</div>
<div class="grid__col--span-4">4 sütun</div>
</div>
Grid and cell alignment[]
Bu, çalışması için ızgaranın yüksekliğinin bir sıranın maksimum yüksekliğinden daha uzun olmasını gerektirir.
<div class="grid">
<div class="grid__col--span-4 grid__col--align-middle">4 sütun orta</div>
<div class="grid__col--span-4 grid__col--align-top">4 sütun üst</div>
<div class="grid__col--span-4 grid__col--align-bottom">4 sütun alt</div>
</div>
Bu, ızgaranın genişliğinin %100'den az olmasını gerektirir (ana ögesine göre).
<div class="grid grid--align-right" style="max-width: 500px;">
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
</div>
<div class="grid grid--align-left" style="max-width: 500px;">
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
</div>
<div class="grid grid--align-center" style="max-width: 500px;">
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
<div class="grid__col--span-4">4 sütun</div>
</div>
API[]
HTML ögesi[]
| HTML element | Açıklama |
|---|---|
<div class="grid"></div> |
Düzen ızgara ögesi için zorunludur. |
<div class="grid__col--span-[SUTUN_SAYISI]"> |
Her ızgara hücresi için zorunludur. Ana ızgara ögesinin altları olmalıdır. |
CSS sınıfları[]
Izgara davranışını değiştirmek için bazı sınıflar vardır. Parantez içindeki metni ([]), parantezlerin kendileri de dahil olmak üzere, "değerler" sütunundaki herhangi bir metinle değiştirin.
| CSS sınıfı | Hedef | Açıklama | Değerler |
|---|---|---|---|
grid |
Izgara | Zorunlu. Tüm ızgara stil kurallarını başlatır. | - |
grid--unresponsive |
Izgara | İsteğe bağlı. Izgara çok daraldığında tüm sütunları tek bir sütunda birleştiren yanıt verme davranışını kaldırır. | - |
grid__padding |
Izgara | İsteğe bağlı. Dört kenarda da (üst, alt, sol ve sağ) ızgara boşluğunun boyutuna eşdeğer bir dolgu ekler. | - |
grid--align-[KONUM] |
Izgara | İsteğe bağlı. Izgaranın yatay hizalamasını belirtir. | left, right, center
|
grid__padding--[KONUM] |
Izgara | İsteğe bağlı. Belirli bir taraftaki ızgara boşluğunun boyutuna eşdeğer bir dolgu ekler. Sınıfta inline veya block kullanılması durumunda, sırasıyla ızgaranın soluna ve sağına veya üstüne ve altına dolgu ekleyecektir.
|
top, bottom, left, right, inline, block
|
grid__col--span-[SUTUN_SAYISI] |
Izgara hücresi | Zorunlu. Hücrenin yayıldığı sütun sayısını belirtir. | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
|
grid__col--align-[KONUM] |
Izgara hücresi | İsteğe bağlı. Bir ızgara hücresinin dikey hizalamasını belirtir. | top, middle, bottom
|
CSS değişkeni[]
Bu bileşen için kullanılabilen bir değişken vardır. Bunları :root ögesinden .grid ögesinin kendisine kadar her yerde kullanabilirsiniz.
| CSS değişkeni | Açıklama |
|---|---|
--grid-gap
|
Her ızgara hücresi arasına (ve grid__padding sınıflarından herhangi biri aracılığıyla eklenmişse dolguya) boşluk ekler. Varsayılan olarak 16px şeklindedir.
|
Örnek:
.grid {
--grid-gap: 16px;
}