grid-auto-columns Özelliği

grid-auto-columns özelliği, örtük gridde bir öğenin kaplayacağı sütunların sayısını ve genişliğini belirler. Örtük grid, öğeler zaten tanımlanmış gridin sınırlarının dışına çıktığında otomatik olarak oluşturulan griddir. Özelliğin değerinde, sütun genişliklerini herhangi bir boyut birimiyle belirtiriz. Özellik ebeveyn öğede belirtilir ve çocuk öğelerin sütun genişliklerini tanımlar.

Sözdizimi

cssseçici {
  grid-auto-columns: sütun genişliği;
}

Örnek

Örtük gridimizdeki öğelerimiz için sütun genişliklerini belirleyelim:

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

css#parent {
  display: grid;
  grid-template-rows: 40px 40px;
  grid-auto-columns: 200px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Ayrıca Bakınız