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:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#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:

html<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>

css#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