Лекция в HTMLAcademy про Grid

Бокс - контейнер, который относится к типу grid, содержит дочерние элементы, называемые грид-элементами. Несмотря на то что грид-контейнер выглядит как обычный блочный элемент для других элементов, таких как основное содержимое, грид-элементы внутри него ведут себя по-другому.

Например, даже строчные элементы начинают занимать всю доступную им область, а внешние отступы у элементов в грид-контейнере также ведут себя иначе.

По умолчанию грид-контейнер является одноколоночным. Чтобы изменить это, необходимо описать шаблон грид-контейнера. Для этого используется свойство grid-template-columns.

.grid-container {
  display: grid;
  grid-template-columns: 100px 150px 80px;
}

Кроме 'grid-template-columns', для описания шаблона грид-контейнера можно использовать другие свойства, такие как 'grid-template-rows' и 'grid-template-areas'.

Если количество элементов в грид-контейнере превышает количество колонок, дополнительные элементы автоматически переносятся на новую строку (ряд) и также распределяются по колонкам.

Доли в гридах 'fr'

Единица измерения fr (сокращение от "fraction" — "доля") представляет собой долю доступного пространства в грид-контейнере.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

В данном примере грид-контейнер будет разделен на три равные части. Первая колонка займет одну часть ширины грид-контейнера, а вторая колонка — две части. Независимо от изменения ширины контейнера, пропорции колонок всегда останутся неизменными.

Единица fr может использоваться в сочетании с пикселями. Например, можно создать сетку, где правая колонка имеет фиксированную ширину 200 пикселей, а левая занимает все оставшееся пространство:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 200px;
}

Свойство gap

Свойство 'gap' определяет расстояние между грид-элементами, но не влияет на расстояние между элементами и границами контейнера. Вот сравнение:

Свойство 'gap' применяется к грид-контейнеру, в то время как 'margin' — к элементам внутри него.

С помощью gap можно задавать отступы отдельно по вертикали и горизонтали: 'column-gap' определяет расстояние между колонками, а 'row-gap' — между рядами.

.grid-container {
  column-gap: 15px;
  row-gap: 5px;
}

Если отступы одинаковы, можно использовать составное свойство 'gap' для удобства:

.grid-container {
  gap: 20px;
}