CSS гридларидаги қаторлар сони ва эни

Грид элементларини қаторлар бўйича ҳам жойлаштириш мумкин. Бунинг учун grid-template-rows хусусияти мўлжалланган. Бу хусусият бўшлиқ билан ажратиб қаторлар ўлчамларини қабул қилади. Унда биз ustunlar учун ўрганган бизинг қийматларини қўллаш мумкин.

Мисол

Мисол учун блокларни тўрт қаторга жойлаштирамиз:

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;
}

Результат:

Мисол

Биринчи ва учинчи қаторлар учун пикселлардаги белкиланган энини кўрсатамиз, иккинчи қатор эса қолган жойни эгалсин:

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;
}

Результат:

Мисол

Қаторлар ўлчамларини кўрсатиш учун repeat функциясидан фойдаланамиз:

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;
}

Результат:

Мисол

Қаторлар баландлигини 50px деб белгилаймиз, қаторлар сонини эса auto-fill қиймати ёрдамида автоматник ҳолда белгилаймиз:

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;
}

Результат:

Амалий машқлар