CSS Grid: Полная шпаргалка для веб-дизайнеров

Введение в CSS Grid

CSS Grid — это мощный инструмент для создания сеток на веб-страницах, который позволяет легко управлять размещением элементов. Если вы хотите научиться создавать адаптивные и эффективные сетки, это руководство станет вашей css grid шпаргалкой.

Основы CSS Grid

CSS Grid основывается на концепции контейнеров и элементов сетки. Контейнер определяет область, в которой будут размещены элементы, а элементы сетки — это дочерние элементы контейнера. Вот несколько основных свойств, которые вам нужно знать:

• display: grid; — устанавливает элемент как контейнер сетки.
• grid-template-columns — определяет количество и ширину столбцов.
• grid-template-rows — задает количество и высоту строк.
• grid-gap — устанавливает отступы между элементами сетки.

Создание простой сетки

Рассмотрим пример создания простой сетки с использованием CSS Grid. Для начала создадим HTML-разметку:

<div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
</div>

Теперь добавим CSS для настройки сетки:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
}
.grid-container div {
    background-color: