CSS Grid'de Sütun Sayısı ve Genişliği
Grid ile çalışmaya
alt elemanların yerleştirileceği sütunların
sayısını ve genişliğini belirleyerek
başlayacağız.
Bu amaçla,
ebeveyn elemana belirtilen ve
grid'deki alt elemanların kaplayacağı
sütunların sayısını ve genişliğini tanımlayan
grid-template-columns özelliğini kullanacağız.
Özelliğin değeri olarak sütun genişliklerini
piksel cinsinden belirtiyoruz.
Örnek
İlk olarak bir ebeveyn eleman oluşturalım
ve onu bir grid konteyneri yapalım.
Diyelim ki içinde dört tane alt eleman bulunan
bir div'imiz var. Bunun için
display özelliğine grid değerini,
grid-template-columns özelliğine ise
iki sütunun genişliğini yazalım:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi dört farklı boyutta sütundan oluşan bir tablo oluşturalım:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Pratik Görevler
Diyelim ki dokuz alt elemana sahip bir div'iniz var. Ebeveyn elemanı bir grid konteyneri yapın.
Alt elemanları genişliği 200px olan iki
sütuna yerleştirin.
Alt elemanları genişliği 150px olan üç
sütuna yerleştirin.
Alt elemanları üç sütuna yerleştirin:
birincisi 100px genişliğinde,
ikincisi 150px genişliğinde,
üçüncüsü ise 200px genişliğinde olsun.