CSS ızgara özelliği

önceki sayfa boşluk
Sonraki sayfa grid-area

Tanım ve Kullanım

grid özelliği aşağıdaki özelliklerin kısaltma özelliğidir:

Ayrıca bkz:

örnek

örnek 1

Üç sütunlu bir grid düzeni oluşturun, ilk satırın yüksekliği 150 piksel olsun:

.grid-container {
  display: grid;
  grid: 150px / auto auto auto;
}

Kendi Kendine Deneyin

örnek 2

İki satır belirlenir, "item1" ögesi önceki iki satırın önceki iki sütununu geçer (beş sütunlu grid düzeni kullanılır):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid:
    'myArea myArea ...'
    'myArea myArea ...';
}

Kendi Kendine Deneyin

örnek 3

所有项目进行命名，并创建一个现成的网页模板：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid:
    header header header header header
    'menu ana ana ana sağ sağ'
    'menu alt alta alt alta alt alta';
}

Kendi Kendine Deneyin

CSS Dilbilgisi

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Özellik Değeri

Değer	Açıklama
none	Varsayılan Değer. Satır veya sütun boyutlarını tanımlamaz.
grid-template-rows / grid-template-columns	Sütun ve satır boyutlarını belirler.
grid-template-areas	Adlandırılmış projeler kullanarak ağızlık düzeni belirler.
grid-template-rows / grid-auto-columns	Satırların boyutlarını (yüksekliklerini) ve sütunların otomatik boyutlarını belirler.
grid-auto-rows / grid-template-columns	Satırların otomatik boyutlarını belirler ve grid-template-columns özelliğini ayarlar.
grid-template-rows / grid-auto-flow grid-auto-columns	Satırların boyutlarını (yüksekliklerini) belirler ve otomatik yerleştirilen projelerin yerleştirilmesi, sütunların otomatik boyutlandırılmasını ayarlar.
grid-auto-flow grid-auto-rows / grid-template-columns	Otomatik yerleştirilen projelerin yerleştirilmesi, satırların otomatik boyutlandırılması ve grid-template-columns özelliğini ayarlamayı belirler.
initial	Bu özelliği varsayılan değerine ayarlar. bkz: initial.
inherit	Bu özelliği, ebeveyn öğesinden devralır. bkz: inherit.

Teknik Ayrıntılar

Varsayılan Değer:	none none none auto auto satır
Geçiş:	hayır
Animasyon Yapımı:	evet, bireysel özelliklere bakın. bkz:Animasyonla İlgili Özellikler.
Sürüm:	CSS Grid Layout Modülü 1
JavaScript Dilbilgisi:	object.style.grid="250px / auto auto auto"