CSS Grid-da qatorlar soni va kengligi

Grid elementlarini qatorlar bo'yicha ham joylashtirish mumkin. Buning uchun grid-template-rows xususiyati mo'ljallangan. Ushbu xususiyat bo'sh joy orqali qatorlar o'lchamlarini qabul qiladi. Undagi ustunlar uchun o'rganilgan qiymatlarning hammasini qo'llash mumkin.

Misol

Misol uchun bloklarni to'rt qatorda joylashtiramiz:

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

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Misol

Birinchi va uchinchi qatorlar uchun piksellarda belgilangan kenglikni ko'rsatamiz, ikkinchi qator esa qolgan joyni egalsin:

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

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Misol

Qatorlar o'lchamlarini ko'rsatish uchun repeat funksiyasidan foydalanamiz:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Misol

Qatorlar balandligini 50px deb belgilaymiz, qatorlar sonini esa auto-fill qiymati yordamida avtomatik ravishda o'rnatamiz:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Amaliy vazifalar