CSS Grid: руковод

ru(Русский)

CSS Grid: руковод

ru(Русский)

Введение в CSS Grid для начинающих

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

Что такое CSS Grid?

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

Why Should You Care? (Why Should You Care? — Why you should care? Why is it important?)

Почему это важно?

До Grid мы мучались с флоатами и позиционированием, чтобы создать сложные макеты. Это было как пытаться построить дом с помощью скотча! Grid делает это легко и интуитивно понятно. Поверте мне, после 15 лет преподавания, я видел облегчение на лицах студентов, когда они открывали для себя Grid.

Начало работы с CSS Grid

Давайте начнем с простого примера. Представим, что мы создаем базовый макет веб-страницы с заголовком, основным контентом, панелью и футером.

<div class="container">
<header>Заголовок</header>
<main>Основной контент</main>
<aside>Панель</aside>
<footer>Футер</footer>
</div>

Теперь добавим немного магии CSS:

.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
gap: 10px;
}

header { grid-area: header; background-color: #ff9999; }
main   { grid-area: main; background-color: #99ff99; }
aside  { grid-area: sidebar; background-color: #9999ff; }
footer { grid-area: footer; background-color: #ffff99; }

Что здесь происходит? Мы говорим контейнеру отображаться как网格 и определяем макет с помощью grid-template-areas. Это как если бы мы рисовали карту нашей веб-страницы!

Свойство CSS grid

Свойство grid — этоorthand для установки всех явных свойств网格а сразу. Это как швейцарский армейский нож для Grid!

Possible Values (Possible Values — Possible values)

Вот таблица возможных значений для свойства grid:

Значение	Описание
none	Не указывается поведение网格а
<grid-template>	Указывает размеры столбцов и строк网格а
<grid-template-rows> / <grid-auto-columns>	Устанавливает свойства grid-template-rows и grid-auto-columns
<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns> ] ]	Устанавливает свойство grid-auto-flow, и optionally устанавливает свойства grid-auto-rows и grid-auto-columns

Applies to (Applies to — Applies to)

Свойство grid применяется к элементам контейнера网格а. Это как сказать: "Эй, этот элемент является начальником макета网格а!"

DOM Syntax (DOM Syntax — DOM Syntax)

object.style.grid = "none|<grid-template-rows> / <grid-template-columns>|<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]|initial|inherit";

Не волнуйтесь, если это сейчас looks like alien language (похоже на инопланетный язык). Мы разберем это!

CSS Grid - <grid-template>

Значение <grid-template> позволяет вам определять структуру вашего网格а. Это как создание чертежа для вашего макета.

.container {
grid: 100px 300px / 3fr 1fr;
}

Это создает网格 с двумя строками (100px и 300px в высоту) и двумя столбцами (3fr и 1fr в ширину). Единица fr как "доля доступного пространства" — очень удобно!

CSS Grid - minmax() и repeat()

Эти функции — как динамическая пара Grid:

• minmax() устанавливает минимальный и максимальный размер для трека.
• repeat() позволяет повторять определения треков.

.container {
grid: repeat(3, minmax(100px, auto)) / repeat(3, 1fr);
}

Это создает 3x3网格, где каждая строка имеет минимальную высоту 100px, но может расти, а столбцы делят доступное пространство поровну.

CSS Grid - Значение auto-flow

Значение auto-flow определяет, как автоматически размещенные элементы переносятся в网格. Это как решать, заполнять ли книжную полку горизонтально или вертикально.

.container {
grid: auto-flow / 200px 1fr;
}

Это создает столбцы 200px и 1fr, с автоматическим созданием строк по мере необходимости.

CSS Grid - Значение auto-flow dense

Добавление dense к auto-flow говорит网格у заполнять дыры раньш, если позже появляются меньшие элементы. Это как эффективно играть в Тетрис!

.container {
grid: auto-flow dense / 200px 1fr;
}

CSS Grid - Сложное缩短ение

Вы можете combine all these concepts into one powerful declaration ( объединить все эти концепции в одно мощное объявление):

.container {
grid: [auto-flow] 100px / repeat(3, [col-start] 1fr [col-end]);
}

Это создает网格 с автоматически переносящимися строками высотой 100px, и три равновidth columns с названными линиями.

CSS Grid - Связанные свойства

Grid имеет семейство свойств. Вот некоторые ключевые родственники:

Свойство	Описание
grid-template-rows	Определяет строки网格а
grid-template-columns	Определяет столбцы网格а
grid-template-areas	Определяет области шаблона网格а
grid-auto-rows	Устанавливает размер для автоматически созданных строк
grid-auto-columns	Устанавливает размер для автоматически созданных столбцов
grid-auto-flow	Управляет работой алгоритма автоматического размещения

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

В заключение, CSS Grid — это мощный инструмент, который может преобразить ваши веб-макеты с банальных на великолепные. Он может показаться подавляющим сначала, но с практикой вы будете создавать сложные макеты с легкостью. Счастливого кодирования, и пусть ваши grids всегда выстраиваются perfectly!

Credits: Image by storyset