Автоматический макет на CSS Grid
Создание автоматического макета наподобие «Google Gallery», но с помощью css grid.
В чём заключается плюс создание мозаичной галереи на grid? Плюс в весе и строках кода.
В отличии от скриптов, а в некоторых вариантах скрипт может быть не один, а штуки четыре, вариант на css grid занимает пять строк кода.
В интернете полно вариантов css grid макетов, наверно вы их уже видели и в курсе что к чему, так что коротко и по делу!
Структура
<div class="grid">
<div class="card" style="--card-height: 4;"></div>
<div class="card" style="--card-height: 8;"></div>
<div class="card" style="--card-height: 4;"></div>
<div class="card" style="--card-height: 8;"></div>
...
</div>
Основной смысл построения разного уровня — задать блокам персональные выставленные значения высоты --card-height: 4.
Так же к высоте можно добавить и ширину --card-width: 2;, но тут нужно подбирать значения у окружающих блоков так, чтобы сверху и снизу не было пустоты.
Ничего сложного.
Стили
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
grid-template-rows: repeat(auto-fill, 3rem);
grid-gap: 2rem;
}
.card {
grid-area: span calc(var(--card-height, 4) + 1)/span var(--card-width, 1);
}
Если галерея не подразумевает использования горизонтальных блоков занимающих более одного столбца, то /span var(--card-width, 1) можно смело удалять.
Остаётся только подобрать размеры, отступы (grid-gap) и стилизацию (закругления, тени и тп.) и всё, макет готов.
Минусы
Одним из главных для меня минусов данного варианта, и это не поддержка браузеров, с этим на данный момент как раз всё нормально, — сложность в циклы. Если нет чёткой высоты блока, допустим блоки содержат текст и он добавляется разными людьми. Тут так просто не получится, придётся писать скрипт высчитывающий высоту каждого блока, а это уже не просто на чистом css, это уже другая история.