CSS - Grid Layout: A Beginner's Guide

Привет, будущая суперзвезда веб-дизайна! Сегодня мы отправимся в увлекательное путешествие в мир CSS Grid Layout. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - я буду вашим дружелюбным проводником, и мы будем двигаться шаг за шагом. К концу этого учебника вы будете создавать стильные, адаптивные макеты, как профессионал!

CSS - Grid Layout

Что такое Grid Layout?

Представьте, что вы расставляете мебель в комнате. Вы можете мысленно разделить пространство на строки и столбцы, чтобы помочь вам организовать все аккуратно. Вот что делает CSS Grid Layout для веб-страниц!

CSS Grid Layout - это мощный инструмент, который позволяет нам создавать двухмерные макеты на веб-страницах. Это как если бы у вас была невидимая сетка на вашей веб-странице, где вы можете放置 контент exactly где хотите. Круто, правда?

Элементы Grid

Прежде чем мы углубимся, давайте познакомимся с некоторыми ключевыми терминами:

Контейнер Grid: Это родительский элемент, который содержит все элементы Grid.
Элементы Grid: Это дети контейнера Grid.
Линии Grid: Линии, divides составляют структуру сетки.
Дорожки Grid: Промежутки между линиями Grid (строки или столбцы).
Ячейка Grid: Пересечение строки и столбца.
Область Grid: Прямоугольное пространство, окруженное четырьмя линиями Grid.

Не волнуйтесь, если они показались вам запутанными сейчас. Мы скоро увидим их в действии!

Свойство Display Grid

Давайте начнем с простого примера. Допустим, мы хотим создать базовую сетку 3x3. Вот как мы это сделаем:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Давайте разберем это:

Мы устанавливаем display: grid; на контейнере, чтобы активировать Grid Layout.
grid-template-columns: auto auto auto; создает три столбца одинаковой ширины.
Мы стилизуем элементы Grid для видимости.

Вот и все! Вы только что создали свой первый макет Grid. Как это здорово!

Строки и столбцы Grid

Теперь давайте немного конкретизируем наши строки и столбцы. Мы можем определить точные размеры:

.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 200px;
}

Это создает сетку с:

Тремя столбцами: 100px, 200px и 100px ширины
Двумя строками: 80px и 200px высоты

Вы также можете использовать разные единицы, такие как проценты или новую единицу fr (доля доступного пространства):

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

Этот макет будет таким же, но столбцы будут изменяться fluidly в зависимости от доступного пространства.

Промежуток Grid

Иногда вам нужно немного места между вашими элементами Grid. Вот где comes grid-gap:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

Это добавляет 10px промежутка между всеми строками и столбцами. Вы также можете устанавливать промежутки для строк и столбцов separately:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

Линии Grid

Помните те линии Grid, о которых мы говорили раньшe? Мы можем использовать их для точного позиционирования наших элементов:

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

Это создает сложный макет с заголовком, занимающим всю ширину, боковым меню, основной контентной областью, правой панелью и footer. Поиграйте с этими значениями, чтобы увидеть, как они влияют на макет!

Справочник по свойствам CSS Grid

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

Свойство	Описание
display: grid;	Определяет контейнер Grid
grid-template-columns	Указывает количество и размеры столбцов
grid-template-rows	Указывает количество и размеры строк
grid-gap	Устанавливает промежуток между элементами Grid
grid-column-start	Указывает, где начать элемент Grid
grid-column-end	Указывает, где закончить элемент Grid
grid-row-start	Указывает, где начать элемент Grid
grid-row-end	Указывает, где закончить элемент Grid
grid-area	Указывает размер и местоположение элементов Grid

И вот и все! Вы только что сделали свои первые шаги в奇妙ный мир CSS Grid Layout. Помните, что практика makes perfect, так что не бойтесь экспериментировать с разными макетами и свойствами. Before you know it, вы будете создавать сложные, адаптивные макеты с легкостью.

Счастливого кодирования, будущие мастера Grid!

Credits: Image by storyset