Как сделать сетку в html

автор: admin
21.11.2023

Как создать сетки на CSS Grid Layout

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

Например, с помощью гридов легко создать такой раздел:

Это трёхколоночная сетка с тремя строками. Блок с перфораторами занимает две колонки и два ряда, между элементами заданы равные отступы

Если пока не знаете, в чём разница, прочитайте, когда использовать флексы, а когда гриды.

Как создать сетку на гридах

Чтобы добавить сетку, нужно в стилях родительского элемента написать display: grid . Далее указывается количество столбцов и строк в сетке, задаются их размеры.

Описать количество и размеры столбцов — grid-template-columns .

Описать количество и размеры строк — grid-template-rows .

Например, так создаётся сетка из двух столбцов шириной 200px и двух строк высотой 150px :

.cats

Как задать размеры столбцов и строк

В процентах. Ширина колонки и высота ряда считаются относительно родительского контейнера. Например, grid-template-columns: 50% 50% создаст две одинаковые колонки шириной в половину родительского элемента.

В пикселях. Устанавливает точную ширину столбца или высоту строки — мы так делали в примере с котами: grid-template-columns: 200px 200px .

С помощью ключевого слова auto. Размеры вычисляются автоматически, в зависимости от свободного пространства.

C помощью ключевого слова fr (fraction). Всё пространство в сетке делится на равные доли fr . Например, колонка grid-template-columns: 1fr растянется на всю область родительского контейнера. А если написать grid-template-columns: 1fr 2fr , вы получите две колонки, при этом вторая будет в два раза шире.

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

В этом примере мы создаём четыре колонки. У первой фиксированная ширина, последняя занимает 25% пространства, а вторая и третья делят оставшееся пространство на две равные доли.

Как разместить элементы в гриде

По умолчанию все элементы располагаются в гриде слева направо сверху вниз и занимают одну ячейку сетки. Нумерация считается по линиям, как на картинке:

Сетка из трёх столбцов и двух рядов

Чтобы расположить элемент в сетке, нужно задать ему координаты. Например, первый кот начинается на линии 1 столбца и линии 1 ряда, а заканчивается на линии 2 столбца и линии 2 ряда. Кот в очках начинается на 3 линии столбца и 1 линии строки, а заканчивается на 4 линии столбца и 2 линии строки.

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

Здесь кот в очках находится между линиями столбцов -1 и -2:

Сетка из трёх столбцов и двух строк, но с обратной нумерацией

Стили для расположения элементов в сетке: grid-column и grid-row

grid-column-start и grid-column-end указывают, в каком столбце начинается элемент и в каком заканчивается. Например:

.keks < grid-column-start: 1; grid-column-end: 3; /*Элемент растянется на две колонки с первой по третью линию*/ >

grid-row-srart и grid-row-end указывают, какие строки занимает элемент. Здесь всё, как со столбцами:

.keks < grid-row-srart: 1; grid-row-end: 3; /*Элемент растянется на две строки, с первой по третью линию*/ >

Для этих свойств есть сокращённые записи: grid-column и grid-row . В них можно сразу прописать, на какой линии начинается и заканчивается элемент — это делается через черту, вот так: grid-row: 1/3.

.keks < /*Элемент займёт две строки.*/ grid-row: 1/3 >

Фотография Кекса растянулась на две строки

Свойство grid-area и repeat

Свойствоgrid-area

Писать каждый раз начальные и конечные координаты для столбцов и рядов — долго и не всегда удобно. Но можно сократить запись с помощью свойства grid-area , оно объединяет и заменяет grid-column и grid-row .

Свойство grid-area принимает четыре значения, которые разделяются косой чертой: grid-row-start , grid-column-start , grid-row-end и grid-column-end :

Эта же запись в полном варианте:

Ключевое словоrepeat

Второй способ сократить код — использовать ключевое слово repeat . Оно помогает, когда в grid-template-columns или grid-template-columns нужно создать множество одинаковых колонок или рядов:

С ключевым словом repeat код выглядит так:

В скобках после repeat сначала указывается количество строк или столбцов, а затем через запятую пишется их размер.

Границы и отступы

Границы между элементами задаются с помощью свойства gap . Например, gap: 10px добавит отступы между элементами по бокам и сбоку:

Чтобы задать только боковые отступы, используйте grid-column-gap , а для отступов между рядами — grid-row-gap .

Как изменить порядок элементов

Есть два способа.

Первый — указать расположение элемента с помощью grid-column , grid-row или grid-area . К примеру, у нас есть такой список:

 Кот Кекс
 Кот Барсик
 Кошка Василиса
 Кот Борис

.grid

На странице он выглядит так:

Поменяем порядок. Сделаем так, чтобы Кекс стал третьим и перешёл на вторую строку. Разметку не меняем, только стили:

.keks < grid-row: 2/3; >

С помощью стилей вы можете указать координаты для каждого элемента и даже наложить один элемент на другой, если это нужно.

Второй способ — использовать свойство order . По умолчанию элементы грида имеют order , равный 0 , но это значение можно менять. Например, вот что произойдёт, если мы добавим «Кексу» order: 1 :

.keks

Элемент переместится в конец:

Где отточить навык работы с гридами

«Старт в программировании» — курс для новичков. Он научит вас создавать страницы, в том числе строить сетки на флексах и гридах. Курс основан на тренажёрах и мастер-классах.

Grid Garden — интерактивная игра, которая поможет понять основы CSS Grid Layout. Вам предстоит поливать грядки с морковью и уничтожать сорняки с помощью гридов.

Раздело CSS Grid Layout — страница на официальной документации MDN. Поможет расширить знания о гридах и не только.

Grid by Example — на этом сайте вы найдёте множество примеров использования CSS Grid. Все статьи здесь на английском языке, но их можно перевести через переводчик, встроенный в браузер.

Материалы по теме

Как создавать адаптивные сетки
Флексы для начинающих
Как сверстать макет. Пошаговый план

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

Что такое CSS?

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

Как подключить CSS к HTML

Есть несколько способов использования CSS внутри HTML:

Внутренний CSS: внутри раздела HTML-документа, в теге :

Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :

Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.

Этот текст будет красного цвета.

Основы синтаксиса CSS

CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.

/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >

Работа с цветом и фоном

Одни из самых основных свойств в CSS — это цвет и фон элементов.

color меняет цвет текста:

background-color меняет фоновый цвет элемента:

Типографика и шрифты

CSS позволяет нам контролировать шрифты на странице:

font-family задаёт шрифт текста, даже если он нестандартный.
font-size определяет размер текста.
font-weight устанавливает жирность шрифта.

Блочная модель

Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .

Внутренние и внешние отступы одной картинкой:

Позиционирование и Flexbox

Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.

.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >

Адаптивный дизайн

С помощью медиа-запросов мы можем создавать адаптивный дизайн, чтобы наш сайт хорошо выглядел на разных устройствах.

@media (max-width: 600px) < .container < flex-direction: column; >>

Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! ��‍��

1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

IE 11, 10, 9, 8, 7, …
Chrome 4–35
Edge 12 и 13
Safari 3–9.1
Firefox 2–38
Opera 22 и ниже
Android 4.4.4 KitKat и ниже (а это
Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>);

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

13 июля 2023

Создаём CSS-сетку нужного размера

У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых раньше мы могли только мечтать. В прошлый раз мы говорили о CSS-сетке Grid. Сегодня мы её будем настраивать.

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

Сегодня поработаем с размером ячеек сетки, чтобы в следующий раз собрать из них что-то действительно полезное.

Готовим шаблон

Начнём с пустого шаблона. Чтобы было наглядно видно, как в сетке располагаются ячейки, сделаем так:

Создадим общий класс, который будет отвечать за сетку целиком. Пока не будем делать разбивку на строки и столбцы.
В нём сделаем видимые внешние границы — так мы поймём, какого размера сетка у нас получается.
Каждую ячейку закрасим светло-оранжевым цветом, чтобы видеть, где заканчивается одна ячейка и начинается другая.
Добавим в оформление ячеек отступы и скругления для красоты.
После этого в теле страницы создадим новый блок и применим к нему наш стиль с сеткой.
Добавим 10 новых элементов в сетку и посмотрим, что получится.

   Grid     Элемент 1
 Элемент 2
 Элемент 3
 Элемент 4
 Элемент 5
 Элемент 6
 Элемент 7
 Элемент 8
 Элемент 9
 Элемент 10

Вот что у нас получается, если у сетки не задавать никаких параметров:

элементы располагаются друг под другом в одну колонку;
сетка растягивается по ширине на весь экран;
элементы тоже растягиваются по ширине;
по высоте сетка занимает ровно столько, чтобы вместить всё содержимое. На всю высоту сетка автоматически не растягивается.

Формируем строки и столбцы

Давайте посмотрим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.

Сделаем в сетке три колонки по 150 пикселей:

grid-template-columns: 150px 150px 150px;

Сетка сразу уменьшилась по высоте, подстраиваясь под количество элементов. Теперь укажем нужную высоту для элементов:

Смотрите, высота поменялась только у первой строки. Остальные остались той же высоты, что и раньше, потому что мы указали только один параметр в команде grid-template-rows. Сделаем 5 строк одинаковой высоты:

grid-template-rows: 50px 50px 50px 50px 50px ;

Так как мы явно указали, что нам в сетке нужно 5 строк, то у нас появилась пустая пятая строка. В ней пока никаких элементов, но сетка уже предусмотрела для них свободное место.

Чтобы не писать пять раз подряд размер 50px, можно использовать такую команду:

grid-template-rows: repeat(5, 50px);

Она повторяет нужный нам размер (50 пикселей) определённое количество раз — в нашем случае это 5 раз. То же самое работает и с колонками — сделаем 4 одинаковые колонки используя функцию repeat():

grid-template-columns: repeat(4, 150px);

Адаптивные размеры и автозаполнение

Теперь сделаем так:

поставим три строки вместо пяти;
последнюю строку растянем вниз до конца окна — используем для этого 1fr;
столбцы сделаем одинаковой ширины.

Запишем это в разделе со стилями:

grid-template-rows: 50px 1fr 50px;
grid-template-columns: repeat(4, 1fr);

Кажется, что 1fr, который должен был растянуть вторую строку на всё свободное место, не работает. Но с ним всё в порядке, ошибки тут нет, смотрите, что произошло на самом деле:

Первая строка получила ширину 50 пикселей.
Третья строка тоже получила 50 пикселей.
После этого браузер, глядя на 1fr, стал высчитывать, какую высоту сделать у второй строки.
Браузер знает, что 1fr должен заполнить всё оставшееся свободное место в сетке, но у нас нижняя граница сетки прилегает вплотную к последней строке.
Это значит, что свободного места в сетке нет, поэтому браузер учёл все внутренние отступы из общих настроек ячейки и сделал вторую строку минимальной высоты.

Чтобы это исправить, нам нужно явно задать общую высоту сетки — например в пикселях:

Чтобы сетка растянулась по высоте на всё окно, используют относительные единицы, например, vh — она указывает, сколько процентов от высоты окна будет занимать элемент. Чтобы растянуть сетку до края, напишем:

Полосы прокрутки появились из-за того, что общий размер сетки у нас больше 100% высоты окна — к высоте добавились внешние и внутренние отступы сетки.

Если нам нужно сделать столбцы и строки в определённых пропорциях, также используем fr — он подгонит всё под размер окна:

height: 92vh;
grid-template-columns: 1fr 2fr 2fr 1fr ;
grid-template-rows: 50px 1fr 50px;

Теперь у нас получился красивый шаблон на 12 ячеек:

верхняя и нижние строки высотой по 50 пикселей;
средняя растягивается на всю высоту;
вторая и третья колонки в два раза шире, чем боковые.

Используя нужные размеры, автозаполнение и полезные функции из нашей подборки современных CSS-команд, можно получить любой шаблон для вёрстки страницы.

Что дальше

Статья получилась большой, поэтому про работу с ячейками и областями сетки поговорим в другой раз. А потом сверстаем на сетке полноценную страницу-портфолио.

Grids

Сетка (grid) — это просто набор горизонтальных и вертикальных линий, создающих шаблон, по которому мы можем выстроить элементы дизайна. Они помогают нам создавать проекты, в которых элементы не прыгают или не меняют ширину при переходе от страницы к странице, обеспечивая большую согласованность на наших сайтах.

В сетке обычно будут столбцы (columns), строки (rows), а затем промежутки между каждой строкой и столбцом, обычно называемые желобами (gutters).

[Временная диаграмма; скоро будет заменена лучшей диаграммой.]

Примечание: Может показаться удивительным, если кто-нибудь из фона дизайна, что CSS не имеет встроенной сетки, и вместо этого мы, похоже, используем множество субоптимальных методов для создания сетчатых конструкций. Как вы узнаете в последней части этой статьи, это изменится, однако вам, вероятно, понадобятся существующие методы создания гридов в течение некоторого времени.

Использование «grid system» в ваших проектах

Чтобы обеспечить постоянный опыт на вашем сайте или в приложении, основываясь на системе сетки с самого начала, вам не нужно думать о том, насколько широкий элемент имеет отношение к другим элементам. Ваш выбор ограничен «количеством столбцов сетки, которые этот элемент будет охватывать».

Ваша «сеточная система» может быть просто решением, принятым в процессе проектирования, для использования регулярной сетки. Если ваши проекты начнутся в приложении для редактирования графики, например Photoshop, вы можете создать сетку для ссылки во время этого процесса, как описано в A better Photoshop grid for responsive web design by Elliot Jay Stocks.

Ваша сетевая система также может быть структурой — либо третьей стороной, либо созданной вами только для вашего проекта, — которую вы используете для обеспечения сетки с помощью CSS.

Создание простых рамок сетки

Мы начнём с рассмотрения того, как вы можете создать простую сетку для вашего проекта.

В настоящее время большинство макетов типа grid создаются с использованием поплавков (floats). Если вы прочитали нашу предыдущую статью о поплавках, вы уже видели, как мы можем использовать эту технику для создания раскладки нескольких столбцов, что является сущностью любой сетки, использующей этот метод.

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

В следующих разделах мы рассмотрим, как создать оба. Мы создадим сетку с 12 столбцами — очень общий выбор, который, как видно, очень адаптируется к различным ситуациям, учитывая, что 12 прекрасно делится на 6, 4, 3 и 2.

Простая сетка с фиксированной шириной

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

Начните с создания локальной копии нашего образца simple-grid.html файла, который содержит следующую разметку в своём теле.

div class="wrapper"> div class="row"> div class="col">1div> div class="col">2div> div class="col">3div> div class="col">4div> div class="col">5div> div class="col">6div> div class="col">7div> div class="col">8div> div class="col">9div> div class="col">10div> div class="col">11div> div class="col">12div> div> div class="row"> div class="col span1">13div> div class="col span6">14div> div class="col span3">15div> div class="col span2">16div> div> div>

Цель состоит в том, чтобы превратить это в демонстрационную сетку из двух рядов на двенадцать столбцов сетки (grid) — верхний ряд, демонстрирующий размер отдельных столбцов, второй ряд — некоторые области разного размера в сетке.

*  box-sizing: border-box; > body  width: 980px; margin: 0 auto; > .wrapper  padding-right: 20px; >

Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:

.row  clear: both; >

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

Желоба между колоннами шириной 20 пикселей. Мы создаём эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов — 12 x 20 = 240.

Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг — создать правило для класса .col , плавающее влево, предоставив ему margin-left из 20 пикселей для формирования желоба и width из 60 пикселей. Добавьте нижеследующее правило в CSS:

.col  float: left; margin-left: 20px; width: 60px; background: rgb(255, 150, 150); >

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

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

В контейнерах макетов, которые мы хотим разместить более одного столбца, нужно предоставить специальные классы, чтобы скорректировать их значения width до необходимого количества столбцов (плюс желоба между ними). Нам нужно создать дополнительный класс, чтобы контейнеры могли охватывать от 2 до 12 столбцов. Каждая ширина является результатом сложения ширины столбца этого количества столбцов плюс ширины желоба, который всегда будет набирать номер меньше, чем число столбцов.

Добавьте нижеследующую часть вашего CSS:

/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */ .col.span2  width: 140px; > / * Три ширины столбца (180 пикселей) плюс две ширины желоба (40 пикселей) * / .col.span3  width: 220px; > /* И так далее. */ .col.span4  width: 300px; > .col.span5  width: 380px; > .col.span6  width: 460px; > .col.span7  width: 540px; > .col.span8  width: 620px; > .col.span9  width: 700px; > .col.span10  width: 780px; > .col.span11  width: 860px; > .col.span12  width: 940px; >

С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своём браузере, чтобы увидеть эффекты.

Примечание: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей готовой версией на GitHub (см. также запуск в режиме реального времени).

Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:

"row"> "col span8">13
 "col span4">14

Теперь у вас работает сетка, вы можете просто определить строки и количество столбцов в каждой строке, а затем заполнить каждый контейнер своим необходимым контентом. Отлично!

Создание fluid grid

Наша сетка работает красиво, но имеет фиксированную ширину. Нам очень нужна гибкая (жидкая) сетка, которая будет расти и сокращаться с доступным пространством в браузере viewport. Для этого мы можем использовать опорные пиксельные ширины и превратить их в проценты

Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.

target / context = result

Для нашей ширины столбца наша целевая ширина составляет 60 пикселей, а наш контекст 960 пикселей. Для расчёта процента мы можем использовать следующее.

60 / 960 = 0.0625

Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.

Мы должны сделать то же самое с нашей шириной желоба:

20 / 960 = 0.02083333333

Поэтому нам нужно заменить 20 пикселей margin-left на наше правило .col 20 пикселей padding-right на .wrapper с 2.08333333%.

Обновление нашей сетки

Чтобы начать работу в этом разделе, создайте новую копию предыдущей страницы примера или создайте локальную копию нашего кода simple-grid-finished.html, который будет использоваться в качестве отправной точки.

Обновите второе правило CSS (с помощью селектора .wrapper ) следующим образом:

body  width: 90%; max-width: 980px; margin: 0 auto; > .wrapper  padding-right: 2.08333333%; >

Мы не только дали нам процент width , мы также добавили свойство max-width , чтобы остановить распространение макета.

Затем обновите четвёртое правило CSS (с селектором .col ) следующим образом:

.col  float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255, 150, 150); >

Теперь идёт немного более трудоёмкая часть — нам нужно обновить все наши правила .col.span , чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.

Обновите нижний блок правил CSS следующим образом:

/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ .col.span2  width: 14.58333333%; > /* Three column widths (18.75%) plus two gutter widths (4.1666666) */ .col.span3  width: 22.91666666%; > /* And so on. */ .col.span4  width: 31.24999999%; > .col.span5  width: 39.58333332%; > .col.span6  width: 47.91666665%; > .col.span7  width: 56.24999998%; > .col.span8  width: 64.58333331%; > .col.span9  width: 72.91666664%; > .col.span10  width: 81.24999997%; > .col.span11  width: 89.5833333%; > .col.span12  width: 97.91666663%; >

Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана — вы должны увидеть, что ширины столбцов хорошо меняются. Отлично!

Более простые вычисления с использованием функции calc()

Вы можете использовать функцию calc () для выполнения математики прямо внутри вашего CSS — это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчёт, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. этот пример из учебника API MediaRecorder.

В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция calc() позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:

.col.span4  width: calc((6.25% * 4) + (2.08333333% * 3)); >

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

.col.span2  width: calc((6.25% * 2) + 2.08333333%); > .col.span3  width: calc((6.25% * 3) + (2.08333333% * 2)); > .col.span4  width: calc((6.25% * 4) + (2.08333333% * 3)); > .col.span5  width: calc((6.25% * 5) + (2.08333333% * 4)); > .col.span6  width: calc((6.25% * 6) + (2.08333333% * 5)); > .col.span7  width: calc((6.25% * 7) + (2.08333333% * 6)); > .col.span8  width: calc((6.25% * 8) + (2.08333333% * 7)); > .col.span9  width: calc((6.25% * 9) + (2.08333333% * 8)); > .col.span10  width: calc((6.25% * 10) + (2.08333333% * 9)); > .col.span11  width: calc((6.25% * 11) + (2.08333333% * 10)); > .col.span12  width: calc((6.25% * 12) + (2.08333333% * 11)); >

Примечание: вы можете увидеть нашу законченную версию в файле liquid-grid-calc.html (также см. её в режиме реального времени).

Примечание: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию calc () , хотя он довольно хорошо поддерживается в браузерах — ещё в IE9.

Семантические и «несемантические» сетчатые системы

Добавление классов в вашу разметку для определения макета означает, что ваш контент и разметка привязаны к его визуальному представлению. Иногда вы слышите это использование классов CSS, описанных как «несемантические», — описывая, как выглядит контент, а не семантическое использование классов, описывающих контент. Это относится к классам span2 , span3 и т. Д.

Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть с классом content в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса span8 , предоставив вам следующее правило:

.content  width: calc((6.25% * 8) + (2.08333333% * 7)); >

Примечание: Если вы использовали препроцессор, такой как Sass, вы могли бы создать простой mixin, чтобы вставить это значение для вас.

Включение офсетных контейнеров в нашей сетке

Сетка, которую мы создали, работает хорошо, пока мы хотим запустить все контейнеры заподлицо с левой стороны сетки. Если бы мы хотели оставить пустое пространство столбца перед первым контейнером — или между контейнерами — нам нужно было бы создать класс смещения, чтобы добавить левое поле на наш сайт, чтобы визуально визуализировать его по сетке. Больше математики!

Давайте попробуем это.

Начните с предыдущего кода или используйте наш файл fluid-grid.html в качестве отправной точки.

Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:

.offset-by-one  margin-left: calc(6.25% + (2.08333333% * 2)); >

Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:

.offset-by-one  margin-left: 10.41666666%; >

Теперь вы можете добавить этот класс в любой контейнер, в котором вы хотите оставить пустое пространство с одним столбцом в левой части окна. Например, если у вас есть это в вашем HTML:

div class="col span6">14div>

Попробуйте заменить его на

div class="col span5 offset-by-one">14div>

Примечание: Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!

Попытайтесь загрузить и обновить, чтобы увидеть разницу или посмотрите наш пример fluid-grid-offset.html (см. также «live»). Готовый пример должен выглядеть так:

Примечание: В качестве дополнительного упражнения вы можете реализовать класс «смещение на два»?

Ограничения с плавающей сеткой

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

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

Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход — он работает только, если вы можете гарантировать, что ваш контент будет определённой высоты.

Flexbox grids?

Если вы прочтёте нашу предыдущую статью о flexbox, вы можете подумать, что flexbox — идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.

Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек ( wrapper ), row и col классов:

body  width: 90%; max-width: 980px; margin: 0 auto; > .wrapper  padding-right: 2.08333333%; > .row  display: flex; > .col  margin-left: 2.08333333%; margin-bottom: 1em; width: 6.25%; flex: 1 1 auto; background: rgb(255, 150, 150); >

Вы можете попробовать сделать эти замены в своём собственном примере или посмотреть на наш пример кода flexbox-grid.html (см. также он работает в режиме реального времени).

Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все ещё нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для display: flex .

На .col мы устанавливаем первое значение свойства flex ( flex-grow ) до 1, чтобы наши объекты могли расти, второе значение ( flex-shrink ) до 1, поэтому элементы могут сокращаться, а третье значение ( flex-basis ) — auto . Поскольку наш элемент имеет набор width , auto будет использовать эту ширину в качестве базового значения flex ( flex-basis ).

В верхней строке мы получаем двенадцать аккуратных коробок на сетке, и они растут и сжимаются одинаково, когда мы меняем ширину окна просмотра. Однако на следующей строке у нас есть только четыре элемента, и они также растут и сокращаются с 60px. Только с четырьмя из них они могут расти намного больше, чем элементы в строке выше, в результате они все занимают одну и ту же ширину во второй строке.

Чтобы исправить это, нам всё равно нужно включить наши классы span , чтобы обеспечить ширину, которая заменит значение, используемое flex-basis для этого элемента.

Они также не уважают сетку, используемую выше, потому что они ничего не знают об этом.

Flexbox является одномерным по дизайну. Он имеет дело с одним измерением — со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам всё равно нужно рассчитать проценты, как для плавающего макета.

В вашем проекте вы всё равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.

Системы сторонних сетей

Теперь, когда мы понимаем математику за нашими расчётами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдёте огромный список вариантов на выбор. В популярных структурах, таких как Bootstrap и Foundation, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.

Давайте рассмотрим одну из этих автономных систем, поскольку она демонстрирует общие методы работы с сеткой. Сетка, которую мы будем использовать, является частью Skeleton, простой CSS-структуры.

Для начала посетите веб-сайт Skeleton и выберите «Загрузить», чтобы загрузить ZIP-файл. Разархивируйте это и скопируйте файлы skeleton.css и normalize.css в новый каталог.

Сделайте копию нашего файла html-skeleton.html и сохраните его в том же каталоге, что и скелет, и нормализовать CSS.

Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:

link href="normalize.css" rel="stylesheet" /> link href="skeleton.css" rel="stylesheet" />

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

Примечание: Нормализация — очень полезная небольшая библиотека CSS, написанная Николасом Галлахером, которая автоматически делает некоторые полезные основные исправления макета и делает стиль элементов по умолчанию более согласованным в разных браузерах.

Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:

div class="container"> div class="row"> div class="col">1div> div class="col">2div> div class="col">3div> div class="col">4div> div class="col">5div> div class="col">6div> div class="col">7div> div class="col">8div> div class="col">9div> div class="col">10div> div class="col">11div> div class="col">12div> div> div class="row"> div class="col">13div> div class="col">14div> div class="col">15div> div class="col">16div> div> div>

Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. центрируется с использованием auto левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство box-sizing в border-box , как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.

.container  position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; >

Элементы могут быть только частью сетки, если они находятся внутри строки, так как в нашем предыдущем примере нам нужен дополнительный или другой элемент с классом строки ( row ), вложенным между content и нашим контейнером фактического содержимого . Мы уже это сделали.

Теперь давайте выложим контейнеры. Скелет основан на сетке из 12 столбцов. В верхних строках нужны классы из one column , чтобы они охватывали один столбец.

Добавьте их сейчас, как показано в следующем фрагменте:

div class="container"> div class="row"> div class="one column">1div> div class="one column">2div> div class="one column">3div> /* and so on */ div> div>

Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:

div class="row"> div class="one column">13div> div class="six columns">14div> div class="three columns">15div> div class="two columns">16div> div>

Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект.

Примечание: Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим html-skeleton-finished.html — файлом (см. также в режиме реального времени).

Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».

.three.columns  width: 22%; >

Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.

Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то ещё, что делает использование рамки для сетчатой системы неотразимым выбором!

Skeleton — это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом — добавив определённые классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределённой сетки.

Родные CSS Сетки с Grid Layout

В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (CSS Grid Layout Module).

В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» — это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.

В Firefox, например, вам нужно перейти к URL-адресу about: config , выполнить поиск по предпочтению layout.css.grid.enabled и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив Grid by Example.

Мы рассмотрели структуру Скелетной сетки выше — как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.

С помощью CSS Grid Layout вы можете полностью указать свою сетку в CSS, не добавляя эти вспомогательные классы в разметку вообще. Давайте рассмотрим наш простой пример и посмотрим, как мы будем создавать тот же макет с помощью CSS Grid Layout.

Создание собственной сетки

Сначала начните с создания локальной копии файла css-grid.html. Он содержит следующую разметку:

div class="wrapper"> div class="col">1div> div class="col">2div> div class="col">3div> div class="col">4div> div class="col">5div> div class="col">6div> div class="col">7div> div class="col">8div> div class="col">9div> div class="col">10div> div class="col">11div> div class="col">12div> div class="col">13div> div class="col span6">14div> div class="col span3">15div> div class="col span2">16div> div>

На этот раз у нас есть родительский с классом обёртки ( wrapper ), а затем все дочерние элементы просто появляются непосредственно внутри обёртки — никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.

Теперь добавьте следующее в элемент :

.wrapper  width: 90%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px; > .col  background: rgb(255, 150, 150); >

Здесь мы устанавливаем правило .wrapper , поэтому оно составляет 90% от ширины тела, с центром и имеет max-width 960px.

Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение grid свойства display , установить жёлоб с свойством grid-gap (en-US), а затем создать сетку из 12 столбцов равной ширине, используя grid-template-columns , новую функцию repeat() и новую единицу, определённую для макета сетки — блок fr .

Блок fr представляет собой блок фракции — он описывает долю доступного пространства в контейнере сетки. Если все столбцы равны 1fr , каждый из них занимает равное количество места. Это устраняет необходимость вычислять проценты для создания гибкой сетки.

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

Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство grid-column . Чтобы охватить 6 столбцов, например:

.span6  grid-column: auto / span 6; >

.span3  grid-column: auto / span 3; >

Значение перед косой чертой — это начальная строка — в этом случае мы явно не устанавливаем это и не позволяем браузеру размещать элемент на следующей доступной строке. Затем мы можем установить его на 6, 3 или сколько угодно строк.

Добавьте нижеследующую часть вашего CSS:

.span2  grid-column: auto / span 2; > .span3  grid-column: auto / span 3; > .span4  grid-column: auto / span 4; > .span5  grid-column: auto / span 5; > .span6  grid-column: auto / span 6; > .span7  grid-column: auto / span 7; > .span8  grid-column: auto / span 8; > .span9  grid-column: auto / span 9; > .span10  grid-column: auto / span 10; > .span11  grid-column: auto / span 11; > .span12  grid-column: auto / span 12; >

Попробуйте сохранить и обновить, и вы увидите, что контейнеры охватывают несколько столбцов, если это необходимо. Круто!

Сетки CSS являются двумерными, так как макет растёт и сжимается, элементы остаются выровненными по горизонтали и по вертикали.

Вы можете проверить это, заменив последние 4 col s следующим:

"col">13some
content

"col span6">14this
is
more
content

"col span3">15this
is
less

"col span2">16

Окончательный макет выглядит так:

Примечание: Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу законченную версию (также смотрите, как она работает в прямом эфире).

Другие полезные функции сетки CSS

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

.content  grid-column: 2 / 8; >

div class="col span2 content">16div>

Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.

Мы можем так же легко группировать строки так же, как и столбцы:

.content  grid-column: 2 / 8; grid-row: 3 / 5; >

Контейнер 16 теперь будет охватывать строки с 3 по 5, а также столбцы с 2 по 8.

Нам также не нужно использовать маржу для фальшивых желобов или явно рассчитать их ширину — сетка CSS имеет эту функциональность, встроенную прямо в свойство grid-gap .

Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой — она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределённую сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.

Активное обучение: Напишите свою собственную простую сетку

В макете «Введение в CSS» мы включили раздел о CSS-таблицах, который включал простой пример формы (см. Пример css-tables-example.html live и исходный код). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия:

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

Примечание: Сначала выполните это и если вы действительно застряли, вы можете проверить свой код на примере css-tables-as-grid.html. Не обманывайте — сначала попробуйте упражнение!

Резюме

Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки — это, по сути, стоп-решение, пока у нас не будет широко распространённого способа достижения этого в CSS.

In this module

Introduction to CSS layout
Floats
Positioning
Practical positioning examples
Flexbox
Grids

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как создать адаптивную сетку

Адаптивная сетка — один из лучших инструментов для создания уникального дизайна. Вы можете настроить всё, что нужно — количество и ширину колонок, отступы и даже контрольные точки, при достижении которых перестраивается раскладка страницы.

К сожалению, большинство людей даже не пытаются создавать свои сетки из-за того, что им не хватает знаний и уверенности в своих силах.

В этой статье я хочу помочь вам обрести веру в себя и знания, нужные для создания собственной сетки. Надеюсь, после прочтения статьи вы отложите фреймворки и попробуете создать собственную сетку для следующего проекта.

Что входит в сетку?

Прежде чем браться за создание сетки, вам нужно сделать три вещи.

1. Спроектировать сетку

Сколько будет колонок? Они будут одинаковой или разной ширины? Какие у них будут ширина и отступы? Вы сможете правильно просчитать параметры сетки только после того, как ответите на эти вопросы. Чтобы помочь вам, я написал статью о проектировании сеток. Прочтите её, что бы научиться грамотно проектировать сетки.

2. Понять поведение сетки на разных вьюпортах

Будете ли вы менять размеры колонок и отступов пропорционально ширине вьюпорта? Или вы будете менять только ширину колонок, оставляя отступы фиксированными? Может вы будете менять количество колонок в определённых контрольных точках?

На эти вопросы тоже нужно ответить. Это поможет рассчитать ширину колонок и отступов. Я писал об этом в той же статье о проектировании сеток, так что обратитесь к ней в случае сомнений.

3. Понять, нравится ли вам писать классы в разметке

Когда речь заходит о сетках, мир фронтенда делится на два лагеря. Один пишет сеточные классы в разметке (например, такой подход используют Bootstrap и Foundation). Я называю это HTML-сетками. Разметка выглядит так:

Другие создают сетки на CSS. Я называю это CSS-сетками.

С CSS-сетками разметка получается проще, чем с HTML-сетками. Вам не приходится повторять одни и те же классы, размечая визуально похожие части документа. Также вам не нужно помнить, как называются классы сетки:

С другой стороны, стили в случае с CSS-сетками получаются сложнее. Придётся думать, чтобы добиться простого решения задачи — если только вы ещё не решали её до сих пор.

А что выбрал бы я?

Как и многие эксперты фронтенда, я выбираю CSS-сетки, хотя и не смею называть себя экспертом. Если вам интересно, я написал статью о том, почему выбрал CSS-сетки вместо HTML-сеток. Также я написал статью, которая поможет вам перейти с HTML-сеток на CSS-сетки.

Так много статей читать. ��

В любом случае, вам нужно определиться с тремя вещами, прежде чем создавать свою сетку. Вот они, если кратко:

Дизайн сетки;
Как сетка ведёт себя на разных вьюпортах;
Использовуется CSS- или HTML-сетка.

Мы можем двигаться дальше, только определившись с этими вещами. В этой статье условия такие:

Сетка имеет максимальную ширину 1140 px, 12 колонок по 75 px и отступы в 20 px. За подсказкой, откуда брать эти числа, обратитесь к этой статье.
Колонки меняют свой размер пропорционально вьюпорту, а отступы остаются фиксированными. Почему я выбрал такой поведение, объясняется в этой статье.
Я собираюсь создавать CSS-сетку. Почему я их рекомендую в ещё одной статье.

Итак, давайте начнём!

Создаём сетку

Процесс создания сетки состоит из восьми шагов:

Выбор технологии реализации
Установка box-sizing: border-box ;
Создание контейнера сетки;
Расчёт ширины колонок;
Определение положения отступов;
Создание отладочной сетки;
Создание вариаций раскладки;
Адаптация раскладки.

Большинство из этих шагов становятся достаточно простыми, как только вы проходите их хотя бы раз. Я объясню всё, что нужно знать для прохождения каждого из них.

Шаг 1: выбор технологии

Что вы будете использовать для создания сетки — CSS-гриды, флексы или старые добрые флоаты? Решения и детали реализации зависят от выбранной технологии.

CSS-гриды, безусловно, лучше всего подходят для создания сетки (потому, что гриды ��). К сожалению, сегодня поддержка гридов оставляет желать лучшего. В каждом браузере они скрыты за флагом, поэтому мы не будем рассматривать гриды в этой статье. (Прим. редактора: на момент публикации перевода гриды уже поддерживаются без флагов в Chrome, Firefox и Safari). Я настоятельно рекомендую ознакомиться с работой Рейчел Эндрю, если вы хотите узнать о гридах больше.

Перейдём к флексам и флоатам. Соображения по их применению схожи, так что можете выбрать то, что вам по душе и двигаться далее. Я буду использовать флоаты, потому что они проще и понятнее новичкам.

Если вы выбрали флексы, помните об отличиях от флоатов, которые нужно учесть.

Шаг 2: установка box-sizing

Свойство box-sizing задаёт блочную модель, которую браузеры используют для расчёта свойств width и height . Выставляя свойству box-sizing значение border-box , мы сильно упрощаем расчёт размеров колонок и отступов, позже вы поймёте, почему.

Вот наглядный пример того, как вычисляется width в зависимости от значения свойства box-sizing :

Обычно я устанавливаю значение border-box для всех элементов на сайте, благодаря чему расчёт ширины и высоты элементов работает последовательно и интуитивно понятно. Вот как я это делаю:

html box-sizing: border-box;
>*,
*:before,
*:after box-sizing: inherit;
>

Примечание: если вам нужно более детальное объяснение работы свойства box-sizing , я рекомендую вам прочесть эту статью.

Шаг 3: создание контейнера сетки

У каждой сетки есть контейнер, определяющий её максимальную ширину. Как правило, я называю его .l-wrap . Префикс .l- означает layout (раскладка). Я использую такое именование с тех пор, как изучил SMACSS, методологию Джонатана Снука.

.l-wrap max-width: 1140px; 
margin-right: auto; 
margin-left: auto;
>

Примечание: для лучшей доступности и адаптивности я настоятельно рекомендую использовать вместо пикселей относительные единицы измерения вроде em или rem . В примерах я использую пиксели, потому что они проще для понимания.

Шаг 4: расчёт ширины колонок

Помните, что мы используем флоаты для вёрстки колонок и отступов? С флоатами мы можем использовать только пять CSS-свойств для создания колонок и отступов, в случае с флексами, их немного больше.

width
margin-right
margin-left
padding-right
padding-left

Если вы помните, при использовании CSS-сеток разметка выглядит примерно так:

Из этой разметки понятно, что сетка имеет всего три колонки. Также видно, что для создания отступов нет дополнительных . Это означает, что:

Мы создаём колонки с помощью свойства width ;
Мы создаём отступы с помощью свойств margin или padding .

Думать о колонках и отступах одновременно сложно, поэтому давайте для начала представим, что делаем сетку без отступов.

Эта сетка будет выглядеть примено так:

А теперь нужно произвести несколько математических вычислений. Мы знаем, что сетка имеет максимальную ширину в 1140 px, значит ширина каждой колонка — 380 px (1140 ÷ 3).

.three-col-grid .grid-item width: 380px; 
float: left;
>

Пока всё хорошо. Мы сделали сетку, которая отлично работает на вьюпортах больше 1140 px. К сожалению, всё ломается, когда вьюпорт становится меньше.

Из-за этого мы не можем использовать пиксели. Нам нужна единица измерения, которая зависит от ширины контейнера: это проценты. Давайте зададим ширину колонок в процентах:

.three-col-grid .grid-item width: 33.33333%; 
float: left;
>

Код выше задаёт простую резиновую трёхколоночную сетку без отступов. Колонки меняют свою ширину пропорционально ширине окна браузера.

Прежде чем двигаться дальше, нужно уточнить одну вещь. Когда все дочерние элементы контейнера плавающие (им задано свойство float ), высота контейнера обнуляется. Это явление называется схлопыванием флоатов. Контейнер ведёт себя так, будто в нём нет дочерних элементов:

Чтобы это исправить, нам нужен клиар-фикс. Он выглядит так:

.three-col-grid::after display: table; 
clear: both; 
content: '';
>

Если вы используете препроцессор вроде Sass, вы можете сделать примесь, чтобы использовать этот код удобно в разных местах:

// Clearfix
@mixin clearfix &::after display: table; 
clear: both; 
content: ''; 
>
>// Usage
.three-col-grid @include clearfix;
>

Мы разобрались с колонками. Следующий шаг — отступы.

Шаг 5: определение положения отступов

Пока мы только знаем, что их можно реализовать с помощью свойств margin и padding . Но какое из них следует выбрать?

Сделав несколько попыток, вы быстро поймёте, что есть четыре возможных способа как сделать эти отступы: внешние, margin и внутренние, padding . Отступы могут быть расположены:

С одной стороны, внешние;
С одной стороны, внутренние;
Равномерно с обеих сторон, внешние;
Равномерно с обеих сторон, внутренние.

Здесь начинаются сложности. Вам нужно по-разному рассчитать ширину колонок в зависимости от используемого метода. Рассмотрим эти методы один за другим и посмотрим на разницу. Не торопитесь, пока читаете.

Метод 1: внешние односторонние отступы

Используя этот метод, вы создаете отступы с помощь margin . Этот отступ будет расположен слева или справа от колонки. Вам решать, какую сторону выбрать.

В рамках этой статьи, давайте предположим, что вы задаете отступы справа. Вот что вы будете делать:

.grid-item margin-right: 20px; 
float: left;
>

Затем пересчитываете ширину колонки как на картинке:

Как вы видите на картинке выше, 1440 px это три колонки и два отступа.

И тут появляется проблема… Нам нужно, чтобы колонки были описаны в процентах, но в то же время отступы зафиксированы на ширине 20 px. Мы не можем делать вычисления с двумя разными единицами измерения одновременно!

Это было невозможно раньше, но возможно сейчас.

Вы можете использовать CSS-функцию calc для сочетания процентов с другими единицами измерения. Она на лету извлекает значение процентов для выполнения вычислений.

Это значит, что вы можете задать ширину в виде функции, и браузер автоматически рассчитает ее значение:

.grid-item width: calc((100% - 20px * 2) / 3);
>

После получения ширины колонки, вам нужно удалить последний отступ у крайнего правого элемента сетки. Вот как это можно сделать:

.grid-item:last-child margin-right: 0;
>

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

.grid-item:last-child margin-right: 0; 
float: right;
>

Фух. Почти готово. И ещё одна вещь.

Наш код хорош только в том случае, если сетка содержит лишь одну строку. Но он не справляется, если строк с элементами больше, чем одна ��

Нам нужно удалить правый внешний отступ у каждого крайнего правого элемента в каждой строке. Лучший способ это сделать — использовать nth-child :

/* Для 3-колоночной сетки */.grid-item:nth-child(3n+3) margin-right: 0; 
float: right;
>

Это всё, что нужно для создания односторонних внешних отступов. Вот CodePen, чтобы вы сами поиграли:

Обратили внимание, что ширина отличается от предыдущего метода? Мы переключили свойство box-sizing в border-box . Теперь width рассчитывается, включая в себя padding .

В этом случае, две из трёх колонок имеют бо́льшую ширину, чем последняя, что в конечном итоге приводит к причудливым расчётам и делает CSS трудным для понимания.

Я предлагаю даже не продолжать с этим методом. Всё обернётся действительно страшно. Пробуйте на свой страх и риск.

Метод 3: внешние разделённые отступы

В этом методе мы разделяем отступы на две части и размещаем по половине с каждой стороны колонки. Код выглядит примерно так:

.grid-item margin-right: 10px; 
margin-left: 10px; 
float: left;
>

Затем пересчитываем ширину колонки как на картинке:

Как мы узнали ранее, рассчитать ширину колонки можно с помощью функции calc . В этой ситуации мы отнимаем три отступа от 100%, прежде чем делить ответ на три для получения ширины колонки. Другими словами, ширина колонки будет calc((100% — 20px * 3) / 3) .

.grid-item width: calc((100% - 20px * 3) / 3); 
margin-right: 10px; 
margin-left: 10px; 
float: left;
>

Это всё! Вам не нужно ничего дополнительно делать для сеток с несколькими строками �� Вот CodePen, чтобы вы могли поиграть:

Обратили внимание, что в этом случае гораздо легче делать расчеты? Всё верно: это треть ширины сетки в каждой контрольной точке.

.grid-item width: 33.3333%; 
padding-right: 10px; 
padding-left: 10px; 
float: left;
>

Вот CodePen, что бы вы могли поиграть:

Что бы использовал я?

Когда я начинал делать сетки два года назад, я в основном делал сетки, которые были спроектированы по нисходящему подходу и построены на гибридной системе. При таком подходе, я использовал процентные значения и для ширины, и для отступов.

В то время, я любил простоту настроек отступов с одной стороны колонки. Это было проще потому, что я не так хорош в математике. От дополнительных рассчётов отступы / 2 я быстро вырубался.

Я рад, что я пошёл этим путем. Хоть CSS и выглядит более сложным, чем для разделенных отступов, я был вынужден изучить селектор nth-child . Я также понял важность написания CSS сначала для мобильных. Насколько я могу судить, это до сих пор является главным препятствием и для молодых, и для опытных разработчиков.

Так или иначе, если вы попросите меня выбрать сейчас, я выберу разделенные отступы вместо односторонних, потому что CSS для них более простой. Также, я рекомендую использовать margin вместо padding , потому что разметка получается чище. Но padding легче рассчитать, поэтому я продолжу статью с ним.

Шаг 6: создание отладочной сетки

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

На сегодня, мне известен лишь кривой способ создания отладочной сетки. Нужно создать HTML-разметку и добавить к ней немного CSS. Вот так примерно выглядит HTML:

CSS для отладочной сетки выглядит следующим образом. Я использую разделенные внешние отступы для упрощения разметки отладочной сетки:

.column width: calc((100% - 20px * 12) / 12); 
height: 80px; 
margin-right: 10px; 
margin-left: 10px; 
background: rgba(0, 0, 255, 0.25); 
float: left;
>

Разметка для раскладки этой гостевой статьи может быть такой:

Итак, сейчас у нас есть 12 колонок. Ширина одной колонки 8,333% (100 / 12) .

Ширина .l-guest равна двум колонкам. Поэтому вам нужно умножить 8,333% на два. Достаточно просто. Проделайте тоже самое для остальных элементов.

Здесь я предлагаю использовать препроцессор типа Sass, который позволит вам рассчитывать ширину колонок легче, используя функцию percentage , вместо расчетов вручную:

.l-guest-article @include clearfix; 
.l-guest // Хм, читается лучше, чем 16.666% :) 
width: percentage(2/12); 
padding-left: 10px; 
padding-right: 10px; 
float: left; 
> .l-main width: percentage(7/12); 
padding-right: 10px; 
padding-left: 10px; 
float: left; 
> .l-sidebar width: percentage(3/12); 
padding-right: 10px; 
padding-left: 10px; 
float: left; 
>
>

Разметка нашей гостевой статьи не должна меняться. То, что у нас есть — это самая доступная раскладка из возможных. Так что, изменения должны быть полностью в CSS.

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

.l-guest-article .l-guest /* Здесь пусто */ 
> 
.l-main margin-top: 20px; 
> 
.l-sidebar margin-top: 20px; 
>
>

Нам здесь нечего делать, каждый компонент занимает всю доступную ширину по умолчанию. Однако мы можем добавить верхний отступ к последним двум элементам, чтобы отделить их друг от друга.

Далее двигаемся к планшетной раскладке.

Давайте предположим, что для этой раскладки мы установим контрольную точку в 700 px. .l-guest должен занимать 4 из 12 колонок, а .l-main и .l-sidebar по 8 колонок каждый.

Здесь нам надо удалить свойство margin-top у .l-main , потому что он должен быть на одной линии с .l-guest .

Также, если мы установим .l-sidebar ширину 8 колонок, он автоматически перейдет во второй ряд — в первом ряду не хватит места. Поскольку он находится во втором ряду, нам тоже нужно добавить внешний отступ слева у .l-sidebar , чтобы протолкнуть его на позицию. В качестве альтернативы, мы можем сделать его обтекаемым справа — я так и сделаю, это не требует лишних расчётов.

И поскольку мы сделали наши грид-элементы обтекаемыми, грид-контейнер должен включать клиар-фикс, чтобы очистить обтекание у дочерних элементов:

.l-guest-article @include clearfix; 
.l-guest @media (min-width: 700px) width: percentage(4/12); 
float: left; 
> 
> 
.l-main margin-top: 20px; 
@media (min-width: 700px) width: percentage(8/12); 
margin-top: 0; 
float: left; 
> 
> 
.l-sidebar margin-top: 20px; 
@media (min-width: 700px) width: percentage(8/12); 
float: right; 
> 
>
>

Наконец, давайте перейдем к десктопной раскладке.

Допустим, для этой раскладки мы установим контрольную точку в 1200 px. .l-guest будет занимать 2 из 12 колонок, .l-main — 7 из 12 и .l-sidebar — 3 из 12.

Для этого мы создаем новое медиавыражение в рамках каждого элемента сетки и изменяем ширину по необходимости. Обратите внимание, что мы также должны удалить верхний отступ у .l-sidebar

.l-guest-article @include clearfix; 
.l-guest @media (min-width: 700px) width: percentage(4/12); 
float: left; 
> @media (min-width: 1200px) width: percentage(2/12); 
> 
> 
.l-main margin-top: 20px; 
@media (min-width: 700px) width: percentage(8/12); 
margin-top: 0; 
float: left; 
> 
@media (min-width: 1200px) width: percentage(7/12); 
> 
> 
.l-sidebar margin-top: 20px; 
@media (min-width: 700px) width: percentage(8/12); 
float: right; 
> 
@media (min-width: 1200px) width: percentage(3/12); 
margin-top: 0; 
> 
>
>

Вот CodePen с финальной раскладкой, которую мы создали:

О, кстати, вы можете добиться таких же результатов со Susy. Только не забудьте выставить gutter-position в inside-static .

Подводя итог

Ого. Длинная получилась статья. Я думал, трижды помру, пока писал её. Спасибо, что дочитали до конца. Надеюсь, вы не померли трижды, пока читали! ��

Как вы могли заметить, в этой статье шаги для создания адаптивной сетки относительно простые. Большинство путается на шагах 5 (определение положения отступов) и 8 (адаптация раскладки).

5-й шаг прост, когда вы учитываете все возможные способы, и мы разобрали их вместе. 8-й шаг проходится легче, если у вас достаточно опыта в написании CSS сначала для мобильных.

Надеюсь, эта статья дала вам знания для построения вашей собственной адаптивной сетки, и я надеюсь увидеть как вы строите специально созданную сетку для вашего следующего проекта.