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

Основы и практика CSS Grid Layout: как использовать двумерную раскладку для повседневных задач

Наш фронтенд-разработчик Данила Абрамов @DanilAbr подготовил материал для новичков и практикующих разработчиков, которые еще не успели разобраться с Grid. В первой части статьи — основные CSS-свойства и принципы раскладки, без которых невозможно понять Grid. Если вы уже знакомы с основами, переходите ко второй части — там примеры решения реальных задач.

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

CSS Grid Layout — что это?

CSS Grid Layout (далее просто Grid) — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.

Grid чем-то похож на display: table (далее таблицы). Но есть важное отличие:

таблицы созданы для отображения табличных данных, а HE для раскладки элементов на страницах. Их стали использовать для создания сеток страниц, потому что на тот момент в CSS не было других (адекватных) вариантов сделать это. Grid же изначально разрабатывался для создания современных, интересных, часто нестандартных двумерных раскладок.

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

Давайте на примерах рассмотрим основные возможности Grid.

В HTML создадим следующую разметку и в CSS добавим ячейкам декоративные стили.

HTML:

CSS:

Добавим контейнеру свойство display: grid.

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

Часть 1. Основные Grid-свойства

grid-template-columns / grid-template-rows

Добавим элементам с классом .el рамку и зададим контейнеру свойство grid-template-columns: https://codepen.io/danilabr/pen/jOayKYN

grid-template-columns определяет количество колонок и может задавать ширину каждой из них

К привычным нам единицам измерения в CSS спецификация Grid добавляет ещё одну — 1fr (fraction). Она похожа на единицу гибкости во Flexbox, flex-grow. В примере выше ширина первой и второй колонки 150px и 20vw. Третья колонка ужимается под контент (свойство auto). А 1fr здесь используется, чтоб занять всё оставшееся доступное место.

fr (fractional unit) всегда занимает свободное пространство. Когда несколько столбцов с ширинами в fr, цифрами мы указываем, какую часть свободного пространства должны делить между собой строки / колонки.

Эту единицу измерения можно использовать даже с дробными значениями:

Давайте посчитаем, чтоб разобраться. Общая доля свободного пространства (100%) будет равна сумме всех fr:

ширина контейнера: 0.5fr + 1fr + 2.5fr = 4fr или 100%

ширина первой колонки: 0.5fr / 4fr = 1/8 или 12.5%

ширина второй колонки: 1fr / 4fr = 1/4 или 25%

ширина третей колонки: 2.5fr / 4fr = 5/8 или 62,5%

Что если у нас есть несколько колонок, и все они должны быть равной ширины? Можно использовать функцию repeat(), которая автоматически создаст нужное количество столбцов, например:

grid создал три колонки, ширина каждой равна ⅓ ширины контейнера

Первым параметром функция repeat() принимает количество, а вторым — ширину (или список ширин). Это значит, что если написать

то мы получим шесть колонок со следующими ширинами: 1fr 2fr 1fr 2fr 1fr 2fr.

Чтобы описать количество и ширину строк, в Grid используется свойство grid-template-rows. Оно может принимать те же значения, что и grid-template-columns.

grid-auto-rows / grid-auto-columns

Есть такие понятия как «явный» и «неявный» Grid. «Явный» создаётся при помощи свойств grid-template-columns и grid-template-rows, когда мы явно указываем количество строк и столбцов. Но что если количество элементов больше, чем ячеек в «явном» гриде? В таком случае грид создаст «неявный» грид. Размеры колонок и строк будут рассчитаны автоматически, в зависимости от контента внутри них. Например:

Описав две строки и два столбца, мы размещаем первые четыре элемента, но остаются ещё два. Размеры следующих строк мы не указали, и высота третьей строки будет равна высоте контента (текст + отступы)

Чтоб контролировать размеры строк и столбцов, в «неявном» гриде есть свойства grid-auto-rows / grid-auto-columns.

Высота третьей строки указана в свойстве grid-auto-rows: 30px;

grid-auto-rows: minmax();

Иногда нужно задать минимальный размер строке, чтобы при заполнении она растягивалась под контент. С этим легко справляется функция minmax(), которая принимает минимальный и максимальный размер:

Здесь минимальная высота строк 100px, максимальная — auto

repeat() — auto-fill / auto-fit

Создание адаптивной сетки — неотъемлемая часть вёрстки. Grid предоставляет нам возможности создавать простые адаптивные раскладки без применения медиа выражений. Функция repeat() первым аргументом может принимать не только количество, но и ключевые слова — auto-fill / auto-fit.

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

Делается это в ОДНУ строчку:

Ключевое слово auto-fill автоматически заполнит нашу сетку колонками, ширина которых будет минимум 300px. Если есть свободное место, колонки будут растягиваться в ширину до тех пор, пока нет места для ещё одной колонки в 300px. Попробуйте плавно изменить ширину окна и увидите, что происходит с сеткой: https://codepen.io/danilabr/pen/dyREbqv

Далее измените auto-fill на auto-fit, и вы увидите, что ничего не изменилось. Разница в их поведении станет видна только если уменьшить количество элементов (или их минимальную ширину). Если ширины и количества элементов не хватает, чтоб заполнить весь экран, начинают работать свойства auto-fill / auto-fit.

Обратите внимание, элемента всего два, но у нас достаточно места для трех колонок, и grid автоматически создаёт нам пустую третью колонку по размерам, которые указаны внутри функции minmax При использовании auto-fit grid подстраивается под количество элементов и растягивает их на всю доступную ширину. Попробуйте это на практике, и вам станет понятно

grid-lines

Неотъемлемой частью спецификации Grid являются grid-lines (линии). Если колонки и строки мы можем создать руками (grid-template-columns / grid-template-rows), то grid-lines всегда создаются автоматически. Мы не можем никак повлиять на их создание, но можем их использовать. Если открыть инспектор гридов в devtools, то видно, что grid создаёт линии и нумерует их:

В сетке три строки. Были созданы четыре горизонтальных линии и пронумерованы сверху вниз (от 1 до 4). То же касается и вертикальных линий. На этом примере два столбца. Grid создал три вертикальных линии и пронумеровал их слева направо (от 1 до 3)

Можно легко размещать элементы в Grid-сетке относительно нумерованных линий. Для этого существуют следующие свойства:

grid-column-start, grid-column-end / grid-row-start, grid-row-endgrid-column / grid-row

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

или (так как элемент по умолчанию занимает одну ячейку):

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

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

Нумерация со знаком минус позволит считать линии с конца столбцов или строк:

Результат будет тот же, что и на скриншоте выше, потому, что третья вертикальная линия, она же последняя, по номеру равна -1 (минус первой).

Auto-placement

Далее затронем важнейшую тему для понимания принципов раскладки Grid — алгоритм автоматического размещения элементов внутри Grid-сетки. Ознакомьтесь с CSS в следующем примере и закомментируйте строчку 26 (grid-row: 1) https://codepen.io/danilabr/pen/KKyaPYM

первый вариант второй вариант

Когда Данила увидел подобное, он очень сильно удивился: почему в одном случае остаются свободные места, а в другом — нет. Ответ здесь гораздо проще чем кажется.

У Grid-раскладки есть специальный алгоритм размещения элементов:

В начале располагаются те элементы, которые были вырваны из обычного потока размещения. Чтобы вырвать элемент из этого потока, достаточно явно указать линию, от которой должен быть расположен элемент. Например, во втором варианте .el-2 вырван из потока авто-размещения с помощью grid-row: 1

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

А так работает алгоритм в первом варианте:

У нас нет элементов, «вырванных» из обычного потока размещения Grid, поэтому работает правило размещения по порядку, друг за другом.

сначала .el-1 встаёт на своё место (первая линия по вертикали и первая по горизонтали):

элементу .el-2 мы указали grid-column: 1. Ему нужно встать на первую линию по вертикали, а первая свободная ячейка на этой линии — это ячейка, которая находится на первой линии по вертикали и второй по горизонтали:

далее по порядку в DOM располагаются остальные элементы, но уже ПОСЛЕ второго элемента (следуя обычному потоку размещения в Grid: слева направо, сверху вниз):

grid-area

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

Для примера оставим четыре элемента (.el-1 .el-2 .el-3 .el-4), и каждому элементу с помощью grid-area дадим псевдоним, по которому будем к нему обращаться, выстраивая сетку в свойстве grid-template у родителя:

С помощью свойства gap добавим отступы между ячейками сетки, и в ОДНОМ свойстве родителя grid-template мы можем создать сетку, задать ей размеры, и наглядно описать раскладку наших элементов на странице:

Это может выглядеть проще. Размеры строк и колонок можно задавать отдельно любыми другими способами. Результат такой: https://codepen.io/danilabr/pen/BampVbg

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

Это далеко не все возможности Grid. Мы рассказали лишь малую часть того, что есть в спецификаци. Но даже этого достаточно, чтоб легко и просто начать делать сетки с помощью Grid.

Теперь перейдём к практике.

Часть 2. Применение CSS Grid Layout. Использование для повседневных реальных задач

Ключевой момент в описании стилей, который отличает использование Grid от других технологий:

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

Адаптивный список карточек с помощью auto-fit

Первым примером будет адаптивный список карточек с минимальной шириной 240px, в котором карточки растягиваются на всю доступную ширину родителя. Нам не понадобится перестраивать сетку на разных ширинах экрана, — Grid сделает это сам. Попробуйте изменить ширину экрана и увидите результат: https://codepen.io/danilabr/pen/mdqRjQy

Форма с помощью grid-template

Следующий пример демонстрирует возможности применения свойств grid-area и grid-template. Сделаем форму, и на четырех разных разрешениях у этой формы будет разная сетка. Выделим два ключевых момента использования Grid в этом примере:

1) Мы можем задавать размеры только некоторых столбцов и строк, остальные будут иметь размеры auto.

2) При использовании Flexbox, для выстраивания в ряд полей name и email мы создали бы дополнительную обёртку над ними в html. Grid позволяет избежать этого: https://codepen.io/danilabr/pen/XWzqQRx

12-колоночная сетка с помощью Grid. Расположение блоков по этой сетке

Третий пример располагает на странице два крупных блока. С помощью грида можно создать сетку, в том числе и стандартную 12-колоночную. И на разных разрешениях можно располагать блоки от разных линий. Для наглядности добавим декоративные стили сетки, чтоб было понятно, по каким линиям располагаются блоки. Попробуйте в примере изменять размеры экрана: https://codepen.io/danilabr/pen/JjOvqaW

Часть 3. Итоги

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

Как начать использовать

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

Чтобы начать использовать Grid, достаточно выбрать один способ из тех, что вы видели. Тот, который понравился и показался интересным. Со временем, попробовав разные подходы, вы будете знать, в какой момент лучше подходит тот или иной. Главное — начать.

Почему не все разработчики хотят изучить grid

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

Если ты знаешь и правильно используешь Grid, то ты:

Более востребован на рынке, чем тот, кто не знает Grid.

Пишешь меньше кода (меньше HTML-элементов (обёрток), меньше строк в CSS).

При построении простой сетки можешь писать все стили в одном месте (в grid-container).

Можешь делать те раскладки, которые нереально сделать без Grid.

Делаешь раскладки проще и быстрее.

Экономишь время, своё и коллег на поддержку проекта.

Можешь потратить это свободное время на более качественную вёрстку макета (делать интересную анимацию, уделить время доступности, улучшить performance и т.п.).

Grid — это будущее

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

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

Как верстать на CSS Grid. Пошаговая инструкция с примерами

HTML, CSS

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

Видео урок по CSS Grid

Основы Grid CSS: колонки, ряды, отступы

Контейнер. Во-первых, нужно создать контейнер, у нас с классом .grid , внутри которого будут находится элементы сетки, в нашем случае 9 элементов <div> . Сетка создается на контейнере и все элементы внутри него выстраиваются по заданной сетке. Просто добавляем к CSS контейнера свойство display: grid; После этого можно указывать прочие свойства Grid. Но пока не заданы другие свойства сетки, элементы выстроены вертикально друг за другом так, как они идут в html разметке.

Колонки. За колонки отвечает свойство grid-template-columns . В значении свойства указывается размер каждой колонки через пробел. Например, три колонки по 100 px каждая: grid-template-columns: 100px 100px 100px; Элементы распределятся в три колонки.

Ряды. За ряды отвечает свойство grid-template-rows . Задать высоту рядам по 100px: grid-template-rows: 100px 100px 100px;

Отступы. Добавим пространство между колонками при помощи grid-column-gap и пространство между рядами при помощи grid-row-gap . Эти свойства можно объединить в grid-gap: 20px 30px; , где первое значение — отступ между рядами, а второе — между колонками. Если нужен одинаковый отступ между колонками и рядами, задаем его одним значением grid-gap: 20px;

Чтобы понять основы Grid CSS, увидеть код и результат, потренироваться, задавая разные значения свойств вручную, переходи на этот учебный пример Codepen Webcademy.

See the Pen CSS Grid — №1 Основы by Webcademy.ru online school (@webcademy) on CodePen.dark

Фракции

Фракция — специальная единица измерения CSS Grid для создания адаптивного макета. Фракция — это часть целого.

Если определить три колонки, шириной 1 фракция каждая ( 1fr ), колонки будут равномерно делить ширину экрана или свободного для них пространства и занимать по 1 части каждая.

grid-template-columns: 1fr 1fr 1fr; вся доступная ширина разделилится на 3 части и каждая колонка займет одну из этих частей.

grid-template-columns: 2fr 1fr 1fr; доступная ширина поделится на 4 части, первая колонка займет две части, а остальные колонки — по одной части.

Фракции можно комбинировать с точными единицами измерения.

grid-template-columns: 200px 1fr 1fr; первая колонка займет фиксированную ширину в 200px, а две другие будут делить оставшееся пространство между собой поровну. При изменении ширины экрана, первая колонка будет также занимать 200px, а ширина колонок, заданная во фракциях, будет пересчитываться.

Проверить и потренироваться можно тут.

See the Pen CSS Grid — №2 Фракции by Webcademy.ru online school (@webcademy) on CodePen.dark

Функция repeat() для повторяющихся колонок и рядов

repeat() позволяет задавать количество и размер колонок без повторений в коде.

Запись grid-template-columns: 1fr 1fr 1fr 1fr; равнозначна grid-template-columns: repeat(4, 1fr); , где первое значение — число колонок, второе — ширина каждой колонки.

Запись grid-template-columns: 50px 200px 50px 200px; равнозначна grid-template-columns: repeat(2, 50px 200px); , размеры указаны через пробел без запятой. Означает: повторить 2 раза комбинацию колонок шириной 50 и 200px. Посмотрим на результат:

See the Pen CSS Grid — №3 repeat by Webcademy.ru online school (@webcademy) on CodePen.dark

Функция minmax() для отзывчивых колонок

minmax() позволяет задать размер, в зависимости от ширины окна. Первый аргумент — минимальный размер, второй — максимальный. При изменении размера окна, ширина колонки будет меняться в заданном диапазоне.

grid-template-columns: minmax(100px, 500px) 100px 100px 100px; здесь первая колонка резиновая, а остальные с фиксированным размером. При достижении минимального размера, колонка перестает уменьшаться. Если продолжать уменьшать окно, то появляется горизонтальная полоса прокрутки.

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

See the Pen CSS Grid — №4 minmax by Webcademy.ru online school (@webcademy) on CodePen.dark

Функция minmax() для отзывчивых рядов

К рядам minmax() тоже применим.

grid-template-rows: 50px minmax(50px, auto) 50px; значение auto указывает на то, что ряд будет расширяться настолько, насколько этого потребует контент.

Направление контента в сетке

По умолчанию контент в сетке располагается в направлении ряда слева направо.

За направление контента отвечает свойство grid-auto-flow .

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

Значение column : контент выстроится в направлении колонок сверху вниз. Элементы теперь будут размещаться, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.

Обратите внимательно на расположение ячеек в сетке при grid-auto-flow: row; и grid-auto-flow: column; .

Протестировать свойство можно тут.

See the Pen CSS Grid — №5 направление контента by Webcademy.ru online school (@webcademy) on CodePen.dark

Неявная сетка

Разберем примеры явной и неявной сеток.

Получаем 2 ряда по 100px, как было указано, и ещё один ряд контента, который не поместился и был автоматически перенесен в третий ряд без фиксированной высоты.

Явная сетка в данном случае будет та, которую мы обозначили свойствами grid-template-columns: 200px 200px 200px; и grid-template-rows: 100px 100px;

Неявная сетка — прочие ряды и колонки, которые созданы автоматически, поскольку контент не поместился в явную сетку. Неявной сеткой можно управлять при помощи свойств grid-auto-rows и grid-auto-columns .

See the Pen CSS Grid — №6 Неявная сетка by Webcademy.ru online school (@webcademy) on CodePen.dark

Потренируйтесь работать со свойствами тут. Попробуйте сами убрать свойство автозаполнения и для колонок: grid-auto-columns и обратите внимание, как ведут себя ячейки при наличии grid-auto-flow: column;

Автоперенос контента: свойства auto-fill и auto-fit

Избежать горизонтальный скролл и сделать, чтобы элементы переносились на новую строку с нужной шириной колонок помогут функции minmax() и repeat() и свойства auto-fill и auto-fit .

Например, сетка на 6 колонок по 200px и они не помещаются в ширину окна, возникает горизонтальная прокрутка. Задаем функцию repeat() , где повторение колонок будет автоматическим по свойству auto-fit (либо auto-fill ), а размер колонок будет регулировать функция minmax() от минимального 50px до 1fr (делить все доступное пространство на количество колонок).

auto-fill стремится поместить в строку как можно больше ячеек. Это свойство предпочитает использовать минимальную ширину для ячейки, даже если есть свободное место.

auto-fit стремится занять всё доступное пространство в строке и подстраивает ширину ячеек под это пространство.

В обоих случаях происходит перенос ячеек на новую строчку, количество колонок подстраивается под размер сетки. Но при наличии свободного пространства auto-fill использует минимальную ширину колонки, а auto-fit подстраивает ширину под свободное место. Такое поведение мы наблюдаем, когда свободного пространства много и очевидна разница в работе этих свойств. В том случае, если пространства недостаточно и происходит перенос на новую строку, разница в работе свойств становится незаметной.

Перемещение ячеек, линии сетки

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

Синим обозначены горизонтальные линии сетки и красным — вертикальные. Нумерация линий сетки слева направо и сверху вниз, либо в обратном направлении со знаком минус:

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

Передвижение между вертикальными линиями (по колонкам)

grid-column-start свойство указывает то, с какой вертикальной линии начнется ячейка

grid-column-end свойство указывает на то, на какой вертикальной линии ячейка закончится

grid-column: 2 / 4; используется вместо предыдущих свойств. Здесь первое значение — линия старта, второе через косую черту — линия окончания ячейки.

Например, обратимся к 1 ячейке. Сейчас она располагается между вертикальными линиями 1 и 2 (или -5 и -4). Будем стилизовать ее по селектору потомства :nth-child(1) .

.grid > div:nth-child(1) обращаемся к контейнеру .grid и далее к первому входящему в него диву > div:nth-child(1)

При помощи свойств grid-column-start: 2; и grid-column-end: 4; расположим ее между 2 и 4 линиями. Ячейка при этом займет 2 колонки.

Можно растянуть ячейку на весь первый ряд.

Для этого будем использовать обратную нумерацию для окончания: grid-column: 1 / -1;

Передвижение между горизонтальными линиями (по рядам)

Переместим ячейку 2 из предыдущего примера на первый ряд.

Стилизуем по селектору .grid > div:nth-child(2) .

У рядов, как и у колонок есть отдельные свойства для обозначения старта и финиша ячейки: grid-row-start и grid-row-end . Но можно использовать одно свойства для двух значений, указанных через косую черту grid-row . Второе значение можно не указывать, если хотим, чтобы ячейка занимала только один ряд.

Плавающие ячейки

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

В примере выше определен ряд для ячейки 2. Но место вокруг нее пустует. Это потому, что ячейка 1 по прежнему остается плавающей. Определим ряд для ячейки 1 и свободное место займут ячейки 3 и 4.

А тут можно вручную подвигать ячейки туда-сюда для закрепления свойств.

Выравнивание ячеек внутри колонок и рядов

По умолчанию ячейки тянутся на всю ширину колонки и ряда. За это отвечают свойства justify-items для колонок и align-items для рядов. Итак, по умолчанию их значение stretch — то есть растягиваться на всю ширину.

Другие значения свойства:

start — ячейка прилипает к началу колонки или ряда

end — ячейка прилипает к концу колонки или ряда

center — ячейка располагается по центру

Сравним поведение ячеек при использовании различных комбинаций этих свойств и значений. Для этого следует задать сначала задать фиксированные ширины для колонок и grid-auto-rows: minmax(100px, auto); для рядов — что бы видеть поведение ячеек при дальнейших манипуляциях.

See the Pen CSS Grid — №9 Выравнивание ячеек by Webcademy.ru online school (@webcademy) on CodePen.dark

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

Вид сетки в инспекторе

Сокращенное определение колонок и рядов с grid-template

Это свойство позволяет сокращенно описать колонки и ряды.
Синтаксис такой: описание рядов / описание колонок.

grid-template: rows / columns;

То есть, вместо двух строчек кода:

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

Можно использовать одну:

grid-template: 100px 100px 100px / 150px 150px 150px 150px;

А ещё лучше не забывать про функцию repeat()

grid-template: repeat(3, 100px) / repeat(4, 150px);

Поработать со свойством сюда.

See the Pen CSS Grid — №10 Свойство grid template by Webcademy.ru online school (@webcademy) on CodePen.dark

Области сетки Grid Areas

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

Обратите внимание: здесь сайдбар находится наравне с футером по нижней границе.

По сути, мы видим две колонки и три ряда. Ячейка Header заняла весь первый ряд. Ячейка Sidebar растянулась на 3 и 4 ряд в первой колонке. И это поведение можно описать при помощи уже известных нам свойств grid-column и grid-row , но это плохо воспринимается визуально и вы не сразу поймете с какой раскладкой имеете дело, глядя только в код.

А можно воспользоваться инструментом Grid Area:

1). Описываем привычным способом колонки и ряды.
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr 100px;

2). Описываем раскладку в свойстве grid-template-areas .
Просто называем сущности так как нам удобно. В данном случае по содержимому. И поехали. Первый ряд описываем в двойных кавычках через пробел: первую и вторую ячейку первого ряда занимает header Пробел и описываем второй ряд: первая ячейка — aside, вторая — main. Таким же образом описываем третий ряд. получается весьма наглядно:
grid-template-areas:
«header header»
«aside main»
«aside footer»;

3). Каждому тегу присваиваем имя области через grid-area
header

4). Для того, чтобы Footer оказался внизу, а Main занял все свободное место, следует добавить html, body

Поработать с областями сетки сюда.

See the Pen CSS Grid — №11 Области сетки Grid Areas by Webcademy.ru online school (@webcademy) on CodePen.dark

Вложенные сетки

Внутри элементов сетки можно создавать вложенные сетки. То есть каждый элемент сетки может стать grid-контейнером со свойством display: grid; Пример тут.

See the Pen CSS Grid — №12 Вложенные сетки by Webcademy.ru online school (@webcademy) on CodePen.dark

Заключение

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

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

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

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 файла, который содержит следующую разметку в своём теле.

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

В элементе <style> добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба — в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили box-sizing в рамку по всем элементам на сайте (см. Changing the box model completely для большего объяснения).

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

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

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

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

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

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

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

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

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

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

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

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

Создание fluid grid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flexbox grids?

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

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

Вы можете попробовать сделать эти замены в своём собственном примере или посмотреть на наш пример кода 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, добавив следующее в голову:

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

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

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

Чтобы начать использовать Skeleton, нам нужно предоставить оболочку <div> класс container — это уже включено в наш HTML. Это центрирует контент с максимальной шириной 960 пикселей. Вы можете видеть, как теперь коробки не становятся шире, чем 960 пикселей.

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

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

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

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

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

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

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

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

Весь 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь мы намеренно добавили некоторые фрагменты строки ( <br> ), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остаётся аккуратным.

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

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

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

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

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

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

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

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 для всех элементов на сайте, благодаря чему расчёт ширины и высоты элементов работает последовательно и интуитивно понятно. Вот как я это делаю:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание: свойство сalc не работает в IE8 и Opera Mini. Смотрите другие подходы, если вам нужно поддерживать эти браузеры.

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

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

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

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

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

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

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

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

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

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

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

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

Этот метод аналогичен предыдущему. Мы делили отступы и размещали их с каждой стороны колонки. На этот раз мы используем padding :

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

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

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

Прежде чем мы двинемся дальше, я хочу вас предостеречь, если вы используете разделенный padding . Если вы взглянете на разметку в CodePen, то увидите, что я добавил дополнительный <div> внутри .grid-item . Этот дополнительный <div> важен, если компонент содержит фон или рамки.

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

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

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

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

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

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

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

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

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

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

Ремарка: Сьюзан Мириам и Собрал Робсон работают над фоновым SVG изображением отладочной сетки для Susy v3. Это очень захватывающе, так как вы можете использовать простую функцию для создания вашей отладочной сетки!

Шаг 7: внесите изменения в раскладку

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

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

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

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

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

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

Должно быть вы заметили, что сейчас часть кода повторяется. Мы можем это исправить, вынеся общие части кода в отдельный селектор .grid-item .

Ну вот, теперь гораздо лучше ��

Шаг 8: создание вариаций раскладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подводя итог

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

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

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

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