Гриды «на пальцах»

Вкратце напомню о гридах. Гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе. Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и займут получившиеся ячейки:

Гриды «на пальцах»

<div class="grid">
  <div>⌘</div>
  <div>✎</div>
  <div>🕑</div>
  <div>★</div> 
</div>
<style>
  .grid {
    /* Включаем гриды */
    display: grid;
    /* Задаём две колонки, два ряда
       и отступ между ними */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 18px;
  }
</style>
🕑

По умолчанию грид‑элементы растягиваются на всю ячейку. Чтобы управлять выравниванием внутри ячеек по горизонтали, используем justify-items:

justify‑items: start

🕑

justify‑items: center

🕑

justify‑items: end

🕑
Значение по умолчанию — stretch, растянуть на всю высоту ячейки

Чтобы управлять выравниванием внутри ячеек по вертикали, используем align-items:

align‑items: start

🕑

align‑items: center

🕑

align‑items: end

🕑
Значение по умолчанию — stretch, растянуть на всю ширину ячейки

Чтобы изменить выравнивание отдельного элемента, используем justify-self и align-self:

.cross {
  justify-self: start;
  align-self: start;
}
.pencil {
  justify-self: end;
  align-self: start;
}
.clock {
  justify-self: start;
  align-self: end;
}
.star {
  justify-self: end;
  align-self: end;
}
🕑

Интересный момент: такого же эффект можно было бы добиться с помощью автоматических маржинов:

.cross {
  /* Автомаржины справа-снизу прижмут элемент влево-вверх */
  margin-right: auto;
  margin-bottom: auto;
}
.pencil {
  /* Автомаржины слева-снизу прижмут элемент вправо-вверх */
  margin-left: auto;
  margin-bottom: auto;
}
.clock {
  /* Автомаржины справа-сверху прижмут элемент влево-вниз */
  margin-right: auto;
  margin-top: auto;
}
.star {
  /* Автомаржины слева-сверху прижмут элемент вправо-вниз */
  margin-left: auto;
  margin-top: auto;
}
🕑

Что запомнить

По умолчанию грид‑элементы растягиваются на всю ячейку.

Чтобы выровнять грид‑элементы по горизонтали, используем justify-items, по вертикали — align-items

Чтобы выровнять отдельный грид‑элемент по горизонтали, используем justify-self, по вертикали — align-self

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы