Відстань між стовпцями і рядами в CSS Grid

Відстань між стовпцями і рядами в CSS Grid

У CSS Grid можна одночасно задавати відстань між рядками та стовпцями за допомогою властивості gap.

Властивість gap є скороченим записом для row-gap і column-gap.

Один параметр у властивості gap

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

<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;
  gap: 10px;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  padding: 10px;
  border: 2px solid #696989;
  width: 600px;
  height: 200px;
}

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

У цьому прикладі між усіма рядками та стовпцями з'являється однакова відстань 10px.

Два параметри у властивості gap

Якщо передати два значення через пробіл, перше значення відповідає за рядки, а друге — за стовпці.

#parent {
  display: grid;
  gap: 20px 10px;
}

У прикладі gap: 20px 10px означає: 20px між рядами та 10px між стовпцями.

• gap — скорочений запис для row-gap і column-gap.
• Одне значення задає однаковий відступ.
• Два значення: перше для рядків, друге для стовпців.
• gap задається батьківському Grid-контейнеру.

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

/* однакова відстань */
#parent {
  gap: 10px;
}

/* різна відстань */
#parent {
  gap: 10px 5%;
}