Гриды «на пальцах»
Выравнивание
Вкратце напомню о гридах. Гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе. Чтобы включить гриды, нужно задать элементу 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.