CSS Izgara Konteyneri
1
2
3
4
5
6
7
8
Izgara Konteyner
Bir HTML öğesinin ızgara kapsayıcı gibi davranmasını sağlamak için displayözelliği
gridveya olarak ayarlamanız gerekir inline-grid.
Izgara kapları, sütun ve satırların içine yerleştirilmiş ızgara öğelerinden oluşur.
grid-template-columns Özellik
Özellik grid-template-columns, ızgara düzeninizdeki sütun sayısını tanımlar ve her bir sütunun genişliğini tanımlayabilir.
Değer, her değerin ilgili sütunun genişliğini tanımladığı boşlukla ayrılmış bir listedir.
Izgara düzeninizin 4 sütun içermesini istiyorsanız, 4 sütunun genişliğini veya tüm sütunların aynı genişliğe sahip olması gerekiyorsa "otomatik" belirtin.
Örnek
4 sütunlu bir ızgara yapın:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Not: 4 sütunlu bir ızgarada 4'ten fazla öğeniz varsa, ızgara öğeleri yerleştirmek için otomatik olarak yeni bir satır ekleyecektir.
Özellik grid-template-columns, sütunların boyutunu (genişliğini) belirtmek için de kullanılabilir.
Örnek
4 sütun için bir boyut belirleyin:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
grid-template-rows Özellik
Özellik grid-template-rows, her satırın yüksekliğini tanımlar.
1
2
3
4
5
6
7
8
Değer, her değerin ilgili satırın yüksekliğini tanımladığı boşlukla ayrılmış bir listedir:
Örnek
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
justify-content Özellik
Özellik justify-content, kap içindeki tüm ızgarayı hizalamak için kullanılır.
1
2
3
4
5
6
Not:justify-content Özelliğin herhangi bir etkisinin olması için ızgaranın toplam genişliğinin kap genişliğinden daha az olması gerekir.
Örnek
.grid-container {
display: grid;
justify-content: space-evenly;
}
Örnek
.grid-container {
display: grid;
justify-content: space-around;
}
Örnek
.grid-container {
display: grid;
justify-content: space-between;
}
Örnek
.grid-container {
display: grid;
justify-content: center;
}
Örnek
.grid-container {
display: grid;
justify-content: start;
}
Örnek
.grid-container {
display: grid;
justify-content: end;
}
hizalama içeriği Özelliği
Özellik , kap içindeki tüm ızgarayı
dikey olarakalign-content hizalamak için kullanılır .
1
2
3
4
5
6
Not:align-content Özelliğin herhangi bir etkiye sahip olması için ızgaranın toplam yüksekliğinin konteynerin yüksekliğinden az olması gerekir.
Örnek
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Örnek
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Örnek
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Örnek
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Örnek
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Örnek
.grid-container {
display: grid;
height: 400px;
align-content: end;
}