CSS Izgara Düzen Modülü
başlık
Menü
Ana
Sağ
altbilgi
Izgara Düzeni
CSS Izgara Düzen Modülü, satırlar ve sütunlar içeren ızgara tabanlı bir düzen sistemi sunarak, kayan noktalar ve konumlandırma kullanmak zorunda kalmadan web sayfalarını tasarlamayı kolaylaştırır.
Tarayıcı Desteği
Izgara özellikleri tüm modern tarayıcılarda desteklenir.
| 57.0 | 16.0 | 52.0 | 10 | 44 |
ızgara öğeleri
Bir ızgara düzeni, bir veya daha fazla alt öğeye sahip bir üst öğeden oluşur.
Örnek
<div
class="grid-container">
<div class="grid-item">1</div>
<div
class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div
class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div
class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9
Mülkü Görüntüle
displayBir HTML öğesi, özelliği
gridveya olarak ayarlandığında ızgara kapsayıcı olur inline-grid.
Örnek
.grid-container {
display: grid;
}
Örnek
.grid-container {
display: inline-grid;
}
Izgara kabının tüm doğrudan alt öğeleri, otomatik olarak ızgara öğeleri haline gelir .
Izgara Sütunları
Izgara öğelerinin dikey çizgilerine sütunlar denir .
ızgara satırları
Izgara öğelerinin yatay çizgilerine satırlar denir .
Izgara Boşlukları
Her sütun/satır arasındaki boşluklara boşluk denir .
Aşağıdaki özelliklerden birini kullanarak boşluk boyutunu ayarlayabilirsiniz:
grid-column-gapgrid-row-gapgrid-gap
Örnek
Özellik grid-column-gap, sütunlar arasındaki boşluğu ayarlar:
.grid-container {
display: grid;
grid-column-gap: 50px;
}
Örnek
Özellik grid-row-gap, satırlar arasındaki boşluğu ayarlar:
.grid-container {
display: grid;
grid-row-gap: 50px;
}
Örnek
Özellik , ve
özellikleri grid-gapiçin kestirme bir özelliktir
:grid-row-gapgrid-column-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Örnek
Bu grid-gapözellik, hem satır aralığını hem de sütun aralığını tek bir değerde ayarlamak için kullanılabilir:
.grid-container {
display: grid;
grid-gap: 50px;
}
Izgara Çizgileri
Sütunlar arasındaki çizgilere sütun çizgileri denir .
Satırlar arasındaki çizgilere satır çizgileri denir .
Bir ızgara öğesini ızgara kapsayıcısına yerleştirirken satır numaralarına bakın:
Örnek
1. sütun satırına bir ızgara öğesi yerleştirin ve 3. sütunda bitmesine izin verin:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Örnek
1. satıra bir ızgara öğesi yerleştirin ve 3. satırda bitmesine izin verin.
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Tüm CSS Izgara Özellikleri
| Property | Description |
|---|---|
| column-gap | Specifies the gap between the columns |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-gap | Specifies the size of the gap between columns |
| grid-column-start | Specifies where to start the grid item |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-gap | Specifies the size of the gap between rows |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| row-gap | Specifies the gap between the grid rows |