grid-auto-rows Özelliği

grid-auto-rows özelliği, örtük gridde bir elemanın kaplayacağı satırların sayısını ve genişliğini belirler. Örtük grid - zaten tanımlanmış gridin dışına çıkan elemanlar olduğunda otomatik olarak oluşturulan griddir. Özelliğin değeri olarak, satır genişliklerini herhangi bir boyut birimi ile belirtiriz. Özellik, ebeveyn elemana uygulanır ve çocuk elemanların satır genişliklerini belirler.

Sözdizimi

cssseçici {
  grid-auto-rows: satır genişliği;
}

Örnek

Örtük gridimizdeki elemanlarımız için satır genişliklerini belirleyelim:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
  <div id="elem5">5</div>
</div>

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

Результат:

Ayrıca Bakınız