Выучить CSS Grid за 5 минут – миссия выполнима
CSS Grid – это будущее макетов веб-страниц. В нашей статье мы быстро пробежимся по главным моментам, которые помогут во всем разобраться.
Grid Layout – основа основ веб-дизайна, это вам любой верстальщик скажет. А вот модуль CSS Grid представляет собой простой и в то же время мощный инструмент для создания сайта. Я считаю, что это намного лучше, чем, например, Bootstrap. В этом году у модуля также появилась встроенная поддержка популярных браузеров (Safari, Chrome, Firefox, Edge), поэтому любой веб-разработчик в любом случае столкнется с этой технологий, будь то сейчас или позже.
В этой статье мы затронем основные элементы. Поехали!
Двумя основными компонентами CSS Grid являются обертка (parent) и элементы (children). Обертка – это сетка, внутри которой как раз и содержатся все элементы.
Вот пример разметки для parent с шестью children:
<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
Теперь предоставляем обертке div отображение сетки:
.wrapper { display: grid; }
wrapper {
display: grid;
}Да, сейчас это не работает, но только потому, что еще не определили вид нашей сетки. Пока 6 div просто располагаются друг над другом:
Здесь также добавлены стили, но пусть они вас не путают: стили и CSS эффекты никак не соприкасаются с нашей темой.
Давайте определим столбцы и строки, чтобы создать двухмерность. Пусть это будет 2 строки и 3 столбца. Для этого обратимся к grid-template-column и grid-template-row:
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}Мы указали, что у grid-template-columns три значения, следовательно получим столько же столбцов. Аналогичная ситуация со строками: 2 значения в grid-template-rows – это две строки. Наши строки будут задавать ячейкам ширину в 50px, а столбцы – длину в 100px. Имеем следующую разметку:
Давайте проверим, правильно ли вы поняли связь значений и вида нашей сетки.
Обратимся к следующему примеру:
.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 30px;
}Постарайтесь нарисовать это в уме. Выглядит вторая разметка так:
А вот размещение элементов в сетке – это уже задача посложнее. Нужно очень хорошо представлять, как это все будет выглядеть. Например, создадим сетку 3х3, пользуясь той же разметкой, что и раньше:
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}Это создаст следующий макет:
Беда в том, что мы видим вариант сетки 3х2, тогда как определяли ее как 3х3. Все потому, что у нас изначально только 6 элементов для заполнения, поэтому еще одну строку мы попросту не видим. Чтобы она стала видимой, нам нужно добавить еще 3 дополнительных элемента.
Чтобы изменить размер или позиционировать элементы, мы воспользуемся их свойствами grid-row и grid-column:
.
item1 {
grid-column-start: 1;
grid-column-end: 4;
}Мы выставляем условие, при котором item1 должен начинаться уже в первой линии и заканчиваться в 4-ом столбце. Таким образом, item1 займет всю первую строку, и мы получим следующую разметку:
Наверное, вас терзает вопрос, почему мы указали в коде 4 столбца, когда у нас их 3? Ну тут все просто: мы говорим не о середине этих столбцов, а о закрывающих их линиях. Посмотрите на следующее изображение, чтобы понять:
Теперь мы работаем со всеми строками в сетке, которые нам видны. Грубо говоря, первый элемент, занявший всю строку, сдвинул последующие вниз, чем и заполнил все данные в условии строки.
Но на этом интересные возможности CSS Grid не заканчиваются. Вот более лаконичный и удобоваримый синтаксис примера выше:
.item1 {
grid-column: 1 / 4;
}Давайте посмотрим, насколько правильно вы поняли суть наших манипуляций с разметкой.
Перестраиваем содержимое:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}И вот что получаем в итоге. Подумайте, каким образом мы сделали сетку такой:
Вот и все основные моменты работы с Grid Layout в CSS!
- Скрытые возможности CSS: 10 полезных советов
- 21 совет профессионалов в CSS
- 7 полезных приемов с функциями на чистом CSS
- 10 способов проверить знания HTML/CSS
20 советов для написания современного CSS
Cупер быстрый способ разобраться в CSS Grid
Многие люди в восторге от CSS Grid и хотят изучить его. Вместе с тем многие из них очень заняты. Поэтому позвольте мне научить вас некоторым базовым вещам Сетки и потратить 5 минут вашего времени.
В отличие от Bootstrap или любых других подобных фреймворков, которые мы использовали в течение последнего десятилетия, CSS Grid не распространяется на всю страницу со всеми элементами на ней.
Вы определяете сетку для определенного элемента. Все прямые потомки этого элемента будут размещены на этой сетке. Ничего другого на странице не будет связано с ней.
Начните с определения того, какой блок будет Grid контейнером, и как структурировать вашу разметку, чтобы ваши Grid элементы были расположены как вы хотите.
Один пример:
<ul> <li>grid item</li> <li>grid item</li> <li>grid item</li> </ul>
<ul> <li>grid item</li> <li>grid item</li> <li>grid item</li> </ul> |
Затем примените свойство сетки к вашему Grid контейнеру, в данном случае к <ul>.
Какой самый простой способ определения сетки? Следующий CSS :
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
. display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } |
grid-container {Существует множество способов определения сетки, но это супер базовый старт. Он будет создавать четыре столбца, которые имеют одинаковую ширину, во всю фракцию доступного пространства.
Поиграть с этим CSS — один из лучших способов понять суть. Для упрощения я настроил все, что вам нужно в CodePen:
See the Pen Learn Grid — exercise 1 by Jen Simmons (@jensimmons) on CodePen.
Попробуйте. Добавьте еще 1fr в список и посмотрите, что произойдет. Измените один из них с 1fr на 2fr
grid-gap: 1rem; чтобы сделать пространство 1rem между каждым столбцом.
Та да! Вот вы и используете CSS Grid.
Теперь, когда вы вошли во вкус, попробуйте пройти следующие базовые упражнения. Ответы находятся в панели JavaScript. Нужно лишь скопировать, вставить и воспроизвести.
Упражнение 1 — Сделайте простую сетку
See the Pen Learn Grid — exercise 1 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 2 — Сделайте сетку с разными пропорциями
See the Pen Learn Grid — exercise 2 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 3 — Создайте адаптивную сетку
See the Pen Learn Grid — exercise 3 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 4 — Явное размещение предметов
See the Pen Learn Grid — exercise 4 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 8 — Сделайте простую сетку
See the Pen Learn Grid — exercise 8 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 9 — Поместите предметы на эту сетку
See the Pen Learn Grid — exercise 9 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 10 — Сделайте пункты перекрытия
See the Pen Learn Grid — exercise 10 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 11 — Сделайте все вместе
See the Pen Learn Grid — exercise 11 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 5 — Сделайте определенные предметы сетки более крупными
See the Pen Learn Grid — exercise 5 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 6 — Автофлоу Spare и Dense
See the Pen Learn Grid — exercise 6 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 7 — Все вместе
See the Pen Learn Grid — exercise 7 by Jen Simmons (@jensimmons) on CodePen.
Свойство шаблона сетки CSS
❮ Назад Полное руководство по CSS Далее ❯
Пример
Создайте сетку из трех столбцов, где первый ряд имеет высоту 150 пикселей:
.grid-container {
display: grid;
шаблон сетки: 150 пикселей
/ авто авто авто;
}
Попробуйте сами »
Определение и использование
Свойство grid-template является сокращенным свойством для
следующие свойства:
- строки шаблона сетки
- сетка-шаблон-столбцы
- области шаблона сетки
Показать демо ❯
| Значение по умолчанию: | нет нет нет |
|---|---|
| Унаследовано: | нет |
| Анимация: | да. Читать о анимированном Попробуй |
| Версия: | Модуль компоновки сетки CSS, уровень 1 |
| Синтаксис JavaScript: | объект . style.gridTemplate=»250px / auto auto»
Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Собственность | |||||
|---|---|---|---|---|---|
| шаблон сетки | 57 | 16 | 52 | 10 | 44 |
Синтаксис CSS
grid-template: none| сетка-шаблон-строки / сетка-шаблон-столбцы | grid-template-areas |initial|inherit;
Значения свойств
| Значение | Описание | Демо |
|---|---|---|
| нет | Значение по умолчанию. Нет определенного размера столбцов или строк | |
| строки шаблона сетки / столбцы шаблона сетки | Задает размеры столбцов и строк | Демонстрация ❯ |
| области сетки-шаблона | Задает макет сетки с использованием именованных элементов | Демонстрация ❯ |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальных | |
| наследовать | Наследует это свойство от родительского элемента. Читать о наследовать |
Другие примеры
Пример
Укажите две строки, где «item1» охватывает первые два столбца в первых двух строки (в сетке из пяти столбцов):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
шаблон сетки:
‘моя область моя область . . .’
‘моя область моя область . . .’;
}
Попробуйте сами »
Пример
Назовите все элементы и создайте готовый к использованию шаблон веб-страницы:
.item1 { область сетки: заголовок; }
.item2 { область сетки:
меню; }
.item3 { область сетки:
основной; }
.item4 { область сетки:
верно; }
.item5 { область сетки:
нижний колонтитул; }
.
grid-container {
display: grid;
шаблон сетки:
‘заголовок заголовка заголовка заголовка заголовка заголовка’
‘меню главное главное главное право’
‘нижний колонтитул меню
нижний колонтитул нижний колонтитул’;
}
Попробуйте сами »
Связанные страницы
Учебник CSS: CSS Grid Item
Справочник по CSS: свойство grid-area
Справочник по CSS: свойство grid-template-rows
900 02 Справочник по CSS: сетка -template-columns propertyСправочник по CSS: свойство grid-template-areas
❮ Назад Полное руководство по CSS Следующий ❯
ПИКЕР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3
Основные каталожные номера
Справочник по HTMLСправочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.
CSS Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
CSS Grid — MUI System
Редактировать эту страницуБыстро управляйте компоновкой, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора адаптивных утилит сетки.
Если вы новичок или не знакомы с сеткой , вам рекомендуется прочитать это руководство по сетке CSS-Tricks.
Свойства родительского
дисплея
Чтобы определить контейнер grid , необходимо указать для свойства CSS display одно из значений: grid или inline-grid .
Я сетчатый контейнер!
… …
grid-template-rows
Свойство grid-template-rows определяет имена строк и функции изменения размера дорожек строк сетки.
<Элемент>1 <Элемент>2 <Элемент>3
Нажмите Введите , чтобы начать редактирование
grid-template-columns
grid-template-columns 9Свойство 0021 определяет имена строк и функции изменения размера дорожек столбцов сетки.
<Элемент>1 <Элемент>2 <Элемент>3
Нажмите Введите , чтобы начать редактирование
зазор
Свойство зазор: размер задает зазор между различными элементами внутри сетки CSS.
<Коробка
х = {{
отображение: «сетка»,
разрыв: 1,
gridTemplateColumns: 'повторить (2, 1fr)',
}}
>
<Элемент>1
<Элемент>2
<Элемент>3
<Элемент>4
<ящик х = {{ отображение: «сетка», разрыв: 1, gridTemplateColumns: 'повторить (2, 1fr)', }} > <Элемент>1 <Элемент>2 <Элемент>3 <Элемент>4
Нажмите Введите , чтобы начать редактирование
row-gap & column-gap
CSS-свойства row-gap и column-gap позволяют задавать промежутки между строками и столбцами независимо друг от друга.
<Коробка
х = {{
отображение: «сетка»,
столбецGap: 3,
разрыв строки: 1,
gridTemplateColumns: 'повторить (2, 1fr)',
}}
>
<Элемент>1
<Элемент>2
<Элемент>3
<Элемент>4
<Ящик х = {{ отображение: «сетка», столбецGap: 3, разрыв строки: 1, gridTemplateColumns: 'повторить (2, 1fr)', }} > <Элемент>1 <Элемент>2 <Элемент>3 <Элемент>4
Нажмите Введите , чтобы начать редактирование.0020 область сетки свойство.
Верхний колонтитул
Основной
Боковая панель
Нижний колонтитул
main' }}>Заголовок
Основной Боковая панель Footer
<Ящик
х = {{
отображение: «сетка»,
gridTemplateColumns: 'повторить (4, 1fr)',
разрыв: 1,
gridTemplateRows: 'авто',
gridTemplateAreas: `"заголовок заголовка заголовка"
"главная основная . боковая панель"
"нижний колонтитул нижний колонтитул"`,
}}
>
Нажмите . Введите , чтобы начать редактирование.
диапазон 2
4 / 5
<коробка
х = {{
отображение: «сетка»,
gridAutoColumns: '1fr',
разрыв: 1,
}}
>
- span 2
{/* Второй невидимый столбец имеет ширину 1/4 */}.
- 4 / 5
<Ящик
х = {{
отображение: «сетка»,
gridAutoColumns: '1fr',
разрыв: 1,
}}
>
Нажмите Введите , чтобы начать редактирование
В приведенной выше демонстрации второй невидимый столбец имеет ширину 1fr /4, что примерно равно 25% .
grid-auto-rows
Свойство grid-auto-rows указывает размер неявно созданной дорожки строки сетки или шаблона дорожек.
диапазон 2
4 / 5
<коробка
х = {{
отображение: «сетка»,
gridAutoRows: '40px',
разрыв: 1,
}}
>
- span 2
{/* Вторая невидимая строка имеет высоту 40 пикселей */}.
- 4 / 5
<Ящик
х = {{
отображение: «сетка»,
gridAutoRows: '40px',
разрыв: 1,
}}
>
Нажмите Введите , чтобы начать редактирование. сетки.
<Ящик
х = {{
отображение: «сетка»,
gridAutoFlow: 'строка',
gridTemplateColumns: 'повторить (5, 1fr)',
gridTemplateRows: 'повторить (2, 50 пикселей)',
разрыв: 1,
}}
>
- 1
<Элемент>2
<Элемент>3
<Элемент>4
- 5
<ящик
х = {{
отображение: «сетка»,
gridAutoFlow: 'строка',
gridTemplateColumns: 'повторить (5, 1fr)',
gridTemplateRows: 'повторить (2, 50 пикселей)',
разрыв: 1,
}}
>
Нажмите Введите , чтобы начать редактирование.
0 конец столбца сетки . Вы можете увидеть, как это используется в примере grid-auto-columns.
Вы можете установить начальную и конечную линии:
…
Или установите количество столбцов для охвата:
…
grid-row
Свойство grid-row является сокращением для grid-row-start + grid-row-end . Вы можете увидеть, как это используется в примере grid-auto-rows.
Вы можете установить начальную и конечную линии:
…
Или установите количество строк для охвата:
…
grid-area
Свойство grid-area позволяет дать элементу имя, чтобы на него можно было ссылаться в шаблоне, созданном с помощью grid-template-areas свойство. Вы можете увидеть, как это используется в примере grid-template-area.