Кількість і висота рядків у CSS Grid

Кількість і висота рядків у CSS Grid

У CSS Grid можна керувати не тільки колонками, а й рядками. Для цього використовується властивість grid-template-rows.

Властивість grid-template-rows задає висоту рядків через пробіл. Для неї можна використовувати ті самі одиниці, що й для колонок: px, %, fr, auto та repeat().

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

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

Кожен рядок отримує власну висоту відповідно до значень у grid-template-rows.

#parent {
  display: grid;

  grid-template-rows:
    100px auto 60px;

  height: 400px;
}

Значення auto дозволяє рядку зайняти залишковий простір контейнера.

#parent {
  display: grid;

  grid-template-rows:
    repeat(3, 1fr);

  height: 200px;
}

У цьому прикладі контейнер ділиться на три однакові частини.

#parent {
  display: grid;

  grid-template-rows:
    repeat(auto-fill, 50px);

  height: 200px;
}

• grid-template-rows задає висоту рядків.
• Можна використовувати px, %, fr та auto.
• repeat() спрощує створення однакових рядків.
• auto-fill створює автоматичну кількість рядків.

/* Завдання №1 */
grid-template-rows:
  100px 150px 200px;

/* Завдання №2 */
grid-template-rows:
  repeat(3, 1fr);