Кількість і ширина стовпців у CSS Grid

Кількість і ширина стовпців у CSS Grid

Для початку роботи з CSS Grid потрібно навчитися керувати кількістю та шириною колонок, у яких будуть розміщуватися дочірні елементи.

За це відповідає властивість grid-template-columns. Вона задається батьківському Grid-контейнеру та визначає кількість колонок і їхню ширину.

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

#parent {
  display: grid;
  grid-template-columns: 200px 400px;

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

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

Створення декількох колонок різної ширини

У grid-template-columns можна задавати будь-яку кількість колонок із різними розмірами.

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

#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 250px;

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

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

• grid-template-columns задається батьківському Grid-контейнеру.
• Кількість значень визначає кількість колонок.
• Кожне значення відповідає ширині окремого стовпця.
• Ширину колонок можна задавати у px, %, fr та інших одиницях.

Практичні завдання

/* Два стовпці по 200px */
.parent {
  display: grid;
  grid-template-columns: 200px 200px;
}

/* Три стовпці по 150px */
.parent {
  display: grid;
  grid-template-columns: 150px 150px 150px;
}

/* Три стовпці різної ширини */
.parent {
  display: grid;
  grid-template-columns: 100px 150px 200px;
}