Скорочення для рядків і колонок у CSS Grid

Скорочення для рядків і колонок у CSS Grid

У CSS Grid можна задавати розміри рядків і колонок окремо через grid-template-rows та grid-template-columns.

Але якщо потрібно задати обидва значення одночасно, можна використати скорочену властивість grid-template.

У властивості grid-template спочатку вказуються рядки, потім через символ / задаються колонки.

<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

#parent {
  display: grid;

  grid-template:
    1fr 1fr 1fr /
    1fr 1fr 1fr;

  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}

#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Запис 1fr 1fr 1fr / 1fr 1fr 1fr означає: три рядки однакової висоти та три колонки однакової ширини.

#parent {
  display: grid;

  grid-template:
    60px 1fr 60px /
    20% 1fr 15%;

  height: 300px;
}

У цьому прикладі перший і третій рядки мають фіксовану висоту, а середній займає весь доступний простір.

#parent {
  display: grid;

  grid-template:
    2fr 1fr 1fr /
    0.5fr 1fr 1fr;

  height: 400px;
}

Синтаксис grid-template

grid-template:
  розміри-рядків /
  розміри-колонок;

• grid-template об'єднує grid-template-rows та grid-template-columns.
• Рядки записуються перед символом /.
• Колонки записуються після символу /.
• Можна використовувати px, %, fr, auto та repeat().

#parent {
  display: grid;

  grid-template:
    100px 1fr /
    200px 1fr 100px;
}

#parent {
  display: grid;

  grid-template:
    1fr 1fr 1fr /
    1fr 1fr 1fr;
}