В этой статье я научу вас, как использовать CSS Grid для создания очень крутой сетки изображений, которая изменяет количество столбцов в зависимости от ширины экрана.
И самая красивая часть - отзывчивость, она будет добавлена с одной строкой CSS. Это означает, что нам не нужно загромождать HTML уродливыми именами классов (например, col-sm-4, col-md-8) или создавать медиа-запросы для каждого размера экрана
Настройка
В этой статье мы продолжим работу с сеткой, которую мы использовали в моей первой статье о CSS Grid. Затем мы добавим изображения в конце статьи. Вот как выглядит наша начальная сетка:
Код Html:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Код Css:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
Примечание: в примере также есть немного базовых стилей, которые я не буду здесь рассматривать, так как они не имеют ничего общего с CSS Grid.
Во второй части мы сделаем колонки отзывчивыми!
