CSS Grid — это самый важный подход для построения веб-макетов, начиная со времен резиновых контейнеров (флексбоксов). Она позволяет не использовать магические методы, трюки и обходные пути, которыми мы пользовались последние 15 лет. Она значительно упростила описание макетов, и я считаю, что она сведет на нет большинство нынешних CSS-фреймворков и позволит вам писать меньше стилей.
Если вы не знакомы с CSS Grid Layout и дочитали до этого места, знайте, что это инструмент верстки, который позволяет манипулировать размерами, габаритами и расположением сенсорных элементов.
CSS-сеть дает новые возможности и позволяет одновременно регулировать горизонтальное и вертикальное расположение элементов без использования медиа-запросов, сеть позволяет легко изменять расположение элементов без изменения структуры документа.
Изучение необходимого минимума
Сначала может показаться, что для понимания предложения вам нужно выучить много нового синтаксиса, но для начала вам нужно понять только его часть. В этой статье на примерах мы познакомим вас с различными концепциями, которые важны для начала создания CSS Grid.
Обобщение браузера
Рамка CSS Grid доступна в Safari 10.1, Firefox 52, Opera 44, Chrome 57. MS Edge работает над обновлением Grid для Edge 15.
Для браузеров Microsoft (IE10-11 и Edge 13-14) существует устаревшая реализация, которая имеет ряд ограничений. Мы кратко рассмотрим устаревшую реализацию, чтобы объяснить некоторые различия между новой и старой реализациями и способы их обхода.
Для большинства макетов мы будем использовать следующий обзор вариантов, чтобы старые браузеры по-прежнему поддерживали понятный им макет:
@supports (display: grid) {
.grid {
display: grid;
}
}
Браузеры, не включающие @supports или не содержащие ссылку, не будут использовать эту функцию.
Чтобы правильно выполнить примеры в этой статье, вам необходимо использовать веб-просмотрщик с поддержкой Grid.
Создание решетки с двумя стойками и хвостовиком между ними
Чтобы продемонстрировать, как CSS Grid назначает остановки, мы начнем с этого макета:
Чтобы создать эту сетку, мы должны использовать grid-template-columns и grid-gap
grid-template-columns определяет, как будут расположены колонки сетки, он принимает число значений, разделенных на промежутки, которые задают размер каждой колонки, а число указанных значений дает нам количество колонок.
Например, таким образом можно определить четыре пина шириной 250 пикселей:
grid-template-columns: 250px 250px 250px 250px;
Такой же макет можно создать и с помощью ключевого слова repeat.
grid-template-columns: repeat(4, 250px);
Определение щеки (пространства между скобами)
grid-gap задает размер кортежей в макете сетки, он может принимать одно или два значения, если вы укажете два значения, они будут использоваться для строк и стоп в соответствующем порядке.
В нашем макете, разделенном на две колонки, мы можем расположить нашу сетку таким образом:
.grid {
display: grid;
grid-template-columns: 50vw 50vw;
grid-gap: 1rem;
}
К сожалению, открытие будет добавлено к ширине контейнера, которая будет такой: 100vw + 1rem, и макет будет иметь горизонтальную прокрутку.
Чтобы исправить этот ущерб, необходимо несколько иное решение. Представьте дробную ординату — FR.
Дробная единица
fr занимает долю от общего пространства; если бы 900px были доступным пространством, и элемент имел одну долю ширины, а другой — две доли, первый занимал бы 1/3 пространства, а другой — 2/3 пространства этих объединенных 900 пикселей.
Мы модифицируем наш код, заменив сингулярности дробями:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
Определение мощности
Чтобы определить значение в нашем приложении, мы объявляем, что элементы будут отображаться в виде набора, и используем полномочия разрешения для размещения их на соответствующих дорожках; трек — это просто загадочное название чего-то (есть и другие треки, которые их различают). Дорожка, как и Flexbox, имеет ряд полномочий выбора и четыре значения — начало, центр, конец и растяжение — которые указывают, где находятся соприкасающиеся элементы гриба на назначенной им дорожке. Stretch, в отличие от других, растягивает элемент от начала до конца его пути.
В нашем приложении, чтобы отрегулировать положение центра масс как по вертикали, так и по горизонтали, мы можем применить эти силы к контейнеру:
.center-content {
display: grid;
align-items: center;
justify-content: center;
}
See the Pen
Grid — two columns with gutters by Chris Wright (@chriswrightdesign)
on CodePen.
Создание макета с двумя остановками с помощью старой версии CSS Grid
Для того чтобы создать макет с использованием старой сетки, мы должны помнить о нескольких ограничениях. В старой реализации не только нет grid-gap, но вы также должны указать для каждого элемента сетки, с чего он начинается, иначе это будет 1, что заставит все дочерние элементы укладываться один за другим в первый столбец.
В приведенной ниже схеме необходимо указать каждому элементу, с чего он начинается:
.grid-legacy {
display: -ms-grid;
-ms-grid-columns: 1fr 1rem 1fr; // gap replacement
}
.grid-legacy:first-child {
-ms-grid-column: 1;
}
.grid-legacy:last-child {
-ms-grid-column: 3;
}
Восстановление и растягивание старой сетки
Старый бокс имеет ту же проблему, что и Flexbox в IE11, если задать минимальную высоту для контейнера, он не будет использоваться. Но эту проблему гораздо проще решить с помощью Grid.
Для этого мы можем использовать функцию minmax для строки родительского контейнера. minmax определяет диапазон наибольших и наименьших значений, которые могут находиться в строке или стеке.
-ms-grid-rows: minmax(100vh, 1fr);
Мы можем сделать дочерние элементы в один столбец с шириной 1fr.
.ms-cell {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
}
Также мы не можем выбрать сетку, используя родительские элементы, как во Flexbox, или текущую сетку. Поэтому для решения нам приходится использовать сами элементы.
.ms-align-center {
-ms-grid-column: 1;
-ms-grid-column-align: center; // like align-self in modern grid
-ms-grid-row-align: center; // like justify-self in modern grid
}
See the Pen
Grid — Legacy two columns with gutter by Chris Wright (@chriswrightdesign)
on CodePen.
Сегодня мы рассмотрели, как создавать упоры, хвостовики, выбирать размер и как сделать так, чтобы сайт работал в большинстве браузеров. Давайте попробуем создать настраиваемый браузер с помощью cookie.
Создание веб-пространства с помощью CSS Grid
Одна из опций, которую позволяет сделать Grid, — это указать, где начинаются колонки в сетке, используя силу grid-column-start. Это дает нам возможность создать веб-пространство.
Один из способов создания пространства — установить заглушку с номером, превышающим ее фактическое положение, оставив предназначенное для нее место в свободном пространстве, таким образом, наша заглушка будет вставлена горизонтально.
В приведенном выше примере создания негативного пространства измерением является div, который, в свою очередь, является оберткой для другого div.
<div class="grid">
<div class="child"><!-- content --></div>
</div>
Номер определяется следующим образом:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
Чтобы заставить дочерний элемент начать с правого стека, мы говорим ему начать со стека номер 2.
.child {
grid-column-start: 2;
}
Пример: несоответствие в Firefox 52 вызывает проблемы с вертикальной прокруткой, когда ордината fr для высоты строки не распространяется на всю высоту окна браузера, для решения этой проблемы мы делаем дочерние элементы элементами сетки и добавляем одну строку той же высоты.
.l-grid--full-height {
grid-template-rows: minmax(100vh, 1fr);
}
See the Pen
Grid — Creating negative space by Chris Wright (@chriswrightdesign)
on CodePen.
Создание «мертвых зон» в пропускной способности
Дорожка будет пропускать остановки, пока не найдет идеальную. Это дает нам возможность создать пространство в середине сайта, где не будет места для контента.
See the Pen
Grid — Creating whitespace with deadzones by Chris Wright (@chriswrightdesign)
on CodePen.
Создание рядов
Что делать, если мы хотим разбить макет на четыре части? Все, что мы рассмотрели до сих пор, кроме лестниц, относится и к рядам.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 250px 250px;
}
Проблема в этом приложении заключается в идеальном сценарии. Размер каждого элемента сетки достаточно мал, чтобы никогда не нарушать заданный размер строки. Когда речь идет о рядах, контент меняет все. Вот пример того, что происходит, когда содержимое превышает заданный размер строки:
Мы сделали два ряда, каждый высотой 250 пикселей. Если вес среднего ряда превышает его, он выдвигается из ряда и начинает перекрывать вес под ним. Это не совсем правильный результат, не так ли?
Установление минимальных размеров с устранением перегибов
В этом приложении нам нужно установить минимальный размер, но позволить ему быть сминаемым для этого размера. Мы можем достичь этого с помощью ключевого слова minmax, которое мы уже использовали ранее.
.grid {
grid-template-rows: minmax(250px, auto) minmax(250px, auto);
}
Теперь, когда мы рассмотрели основы создания рядов с пробелами, мы можем приступить к созданию более сложных рядов: горизонтальных и вертикальных.
See the Pen
Grid — Row with minmax by Chris Wright (@chriswrightdesign)
on CodePen.
Создание более сложных балок
Давайте начнем создавать более складчатые сетки, размещая элементы сразу на нескольких линиях в одном ряду. В стекерах мы можем достичь этого с помощью grid-column-start и grid-column-end, или написать это более быстро, например, так:
grid-column: 1 / 3;
Недостатком этого подхода является то, что он не очень модульный, и это может привести к написанию общего кода для позиционирования частей контента.
Ключевое слово span является более модульным, поскольку мы можем разместить его в любом месте и позволить сети делать все, что нужно. Это позволяет растянуть элемент на несколько длин, начиная с его начального положения:
.span-column-3 {
grid-column-start: span 3;
}
Какому бы элементу мы ни присвоили этот класс, он заставит его выдвинуться на три длины от текущего положения.
Создание свернутых множеств с помощью span
See the Pen
Grid — More complex grids with span by Chris Wright (@chriswrightdesign)
on CodePen.
Планирование макета с помощью span
Мы можем планировать масштабные макеты, расширяя каждый отсек до самой маленькой единицы в макете. В данном примере показана самая маленькая единица:
Имея все вокруг наименьшего блока, мы можем легко использовать классы из span для создания интересных макетов, и пока значения span добавляются — вы можете объединять дорожки как в ряды, так и в стопки для создания иерархии в вашей сети.
Адаптивные сетки без использования медиа запросов
Хотя некоторые из предыдущих приложений могут быть адаптированы к изменениям в пространстве, ни одно из них не было специально написано для этих целей. Сетка имеет две чрезвычайно полезные функции для управления свободным пространством. Эти функции называются auto-fit и auto-fill и используются внутри функции repeat, например, с функцией minmax:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Они заменяют числа в функции и вычисляют максимально возможное количество строк и столбцов в сетке. Основные различия между ними заключаются в том, как они решают проблему наличия большого пространства на линии.
auto-fill пытается вместить в стек как можно больше повторяющихся элементов, которые он может обработать без переполнения. Если не хватает места для добавления еще одного элемента, то следующий элемент будет размещен на следующей строке, а элемент, который он не смог запомнить, останется пустым.
auto-fit выполняется аналогично автозаполнению, за исключением того, что любая пустая растяжка квотируется и элементы растягиваются в этом ряду, что подразумевает поведение Flexbox, который квотирует ограничители при уменьшении доступной растяжки.
Макет, который останавливается на медной записи, ограничен областью просмотра, а это не подходит для модульных элементов — компоненты всех блоков имеют возможность адаптироваться к доступному пространству. Итак, как это может выглядеть на практике?
See the Pen
Grid — Auto-fit demo by Chris Wright (@chriswrightdesign)
on CodePen.
Это лишь малая часть основ.
У нас было почти пятнадцать лет доминирования CSS float в верстке, мы узнали практически все, что можно было сделать с float — CSS Grid является новым ребенком в блоке, и нам еще предстоит много экспериментировать и учиться.
На данный момент самый важный шаг — это просто начать строить с ней, чтобы почувствовать себя достаточно комфортно для создания более сложных макетов. Grid — это в основном неизведанная территория, как только мы лучше поймем его возможности и начнем комбинировать его с другими функциями, мы сможем создавать более интересные, гибкие макеты с меньшими накладными расходами и уменьшим потребность в абстракциях фреймворка.
Если вы хотите углубиться в CSS Grid больше, чем в этой статье, попробуйте статью Рейчел Эндрю GridByExample, в которой рассматривается каждая функция CSS Grid в демонстрации с пояснениями.
