Микросетки

Микросетки — сетки мелких элементов веб-страницы.

В отличие от крупных сеток, микросетки меньше зависят от макета и больше — от содержимого. Содержимое страниц со временем может меняться. Если не учитывать этого, вёрстка сломается.

Отступы у ссылок

Часто ссылкам добавляют внутренние отступы, чтобы увеличить область, по которой можно кликнуть (её ещё называют активной областью). Чем проще попасть по ссылке, тем удобнее интерфейс.

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

.element {
  display: block;
}

Свойство align-items

По умолчанию грид-элементы занимают всё доступное пространство по высоте. Такое поведение можно изменить с помощью свойства align-items. Оно задаётся грид-контейнеру и управляет выравниванием грид-элементов по вертикали.

.grid-container {
  display: grid;
  align-items: start;
}

У align-items могут быть следующие значения:

• stretch — значение по умолчанию; элементы начинаются у верхней границы и растягиваются на всю высоту.
• start — элементы выстраиваются по верхней границе и, если содержимого немного, не тянутся на всю высоту;
• end — элементы выстраиваются по нижней границе;
• center — элементы располагаются по центру;

Свойство flex-wrap

Если элементам не хватает места, они могут вылезти за границы контейнера. Такое поведение называют выпадением элементов. Также говорят, что произошло переполнение.

По умолчанию флекс-контейнер однострочный. Чтобы элементы не выпадали из контейнера, его делают многострочным. Для этого используют свойство flex-wrap со значением wrap.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}