Css grid руководство: Полное руководство по CSS Grid (Grid шпаргалка)
Основные понятия Grid Layout — CSS
CSS Grid Layout представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается CSS Grid Layout ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.
Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам. Grid имеет следующие функции:
Фиксированные и гибкие размеры полос
Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения — fr, предназначенную для этой цели.
Расположение элемента
Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путем привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.
Создание дополнительных полос для хранения контента
Вы можете определить явную сетку с макетом сетки, но спецификация также касается контента, добавленного за пределами объявленной сетки, при необходимости добавляя дополнительные строки и столбцы. Включены такие функции, как добавление «столько столбцов, сколько будет помещено в контейнер».
Управление выравниванием
Grid содержит функции выравнивания, чтобы мы могли контролировать, как элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid.
Управление перекрывающимся контентом
В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью z-index
.
Grid — это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем grid контейнере.
Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.
В этом примере есть div, содержащий класс wrapper с пятью потомками
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Сделаем wrapper grid контейнером
.wrapper {
display: grid;
}
Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.
По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.
Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.
Мы определяем ряды и столбцы в нашей сетке при помощи свойств grid-template-columns
и grid-template-rows
. Это определяет полосы сетки. Полоса сетки — это место между любыми двумя линиями сетки. На изображении ниже вы можете увидеть подсветку полосы — первого трека ряда в нашей сетке.
Можно дополнить пример выше, добавив свойство grid-template-columns
и задав размеры полос колонок.
В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Единица измерения fr
Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины fr
представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.
wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
В следующем примере мы создаем грид с треком в 2fr
и двумя треками по 1fr
. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части — два оставшихся.
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.
.wrapper {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
Задание треков с помощью нотации
repeat()
В огромных гридах с большим количеством треков можно использовать нотацию repeat()
, чтобы повторить структуру треков или ее часть. Например, такое задание грида:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
можно записать вот так:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr
следует трек шириной 2fr
, и все это дело повторяется пять раз.
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
Явный и неявный грид
Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства grid-template-columns
, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью
grid-template-columns
и grid-template-rows
. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.
Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств grid-auto-rows
и grid-auto-columns
.
В примере ниже мы задаем grid-auto-rows
, чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.
wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
Масштабирование треков и
minmax()
При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк может возникнуть следующая ситуация: мы хотим определить для треков минимальный размер, но при этом быть уверенными, что при необходимости треки растянутся, чтобы вместить весь добавленный в них контент. Например, нам нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает, скажем, 300 пикселей в высоту, мы хотим, чтобы строка тоже стала 300 пикселей.
Для подобных ситуаций в Grid предусмотрено решение с помощью функции minmax()
. В следующем примере minmax()
используется, как значение свойства grid-auto-rows
. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение auto
. Использование auto
означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
<div>
<div>One</div>
<div>Two
<p>I have some more content in.</p>
<p>This makes me taller than 100 pixels.</p>
</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Нужно заметить, что когда мы определяем грид, мы определяем грид-треки, а не грид-линии. После этого грид обеспечивает нас пронумерованными линиями, номера которых можно использовать для размещения элементов. Например, в гриде с тремя колонками и двумя рядами у нас — четыре колоночные линии.
Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 — самая левая линия в гриде. В языках с написанием справа-налево, линия 1 — самая правая линия в гриде. Линиям также можно давать имена, и — не переключайтесь, дальше мы узнаем, как это делать.
Размещение элементов по линиям
В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек.
В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств grid-column-start
, grid-column-end
, grid-row-start
и grid-row-end
. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае — самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.
Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека — со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида.
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
Не забывайте, что Вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.
Грид-ячейка (grid cell) — наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.
Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (grid area). Грид-области должны быть перпендикулярными, — невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных.
Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств grid-column-gap
и grid-row-gap
, или с помощью сокращенного свойства grid-gap
. В примере ниже мы создаем зазор в 10 пикселей между колонками и в 1em
между строками.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 1em;
}
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Любое пространство, которое занимают зазоры, добавляется в начало эластичных треков, задаваемых с помощью fr
, поэтому зазоры используются для регулирования размеров и действуют как регулярные грид-треки, хотя что-то разместить в них нельзя. В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой грид-линии была добавлена толщина.
Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трехколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.
<div>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Если мы задаем для box1
значение display: grid
, то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
В данном случае вложенный грид не связан с родительским. Как Вы можете видеть, он не наследует значение свойства grid-gap
родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.
Подгрид (Subgrid)
В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.
Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.
В приведенном выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr)
, на grid-template-columns: subgrid
. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: subgrid;
}
Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещенными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}
Элемент box2
теперь перекрывает box1
, и отображается сверху, поскольку в исходном коде находится ниже.
Управление порядком отображения
Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства z-index
— точно так же, как в случае с позиционированными элементами. Если задать box2
значение z-index
, меньшее, чем у box1
, в стеке он отобразится под элементом box1
.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
z-index: 2;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
z-index: 1;
}
подборка полезных ресурсов и руководств
CSS Grid Layout — один из самых обсуждаемых инструментов верстальщиков на данный момент. Однако он не является чем-то очень новым. Дело в том, что система приобрела поддержку самых известных браузеров: Firefox, Chrome, Opera, а также Safari. Именно этим и вызван такой ажиотаж в сторону Grid.
Но что же такое CSS Grid Layout (он же Grid) на самом деле? На что он способен? И готов ли он для использования в полной степени в проектах? Давайте разберёмся в этом и посмотрим на подборку полезных ресурсов, способных помочь вам с началом использования Grid.
Что такое CSS Grid Layout?
История инструмента начинается с 2011 года. Именно тогда компания Microsoft отправила предложение группе разработчиков CSS. По этой ссылке вы можете посмотреть, как изначально выглядело предложение от Microsoft об использовании Grid вместе с Flexbox для вёрстки адаптивных макетов.
Данный CSS модуль определяет двумерную систему компоновки на основе сетки, оптимизированной для дизайна пользовательского интерфейса. Дочерние элементы могут быть помещены в произвольные места (слоты) при предопределённой гибкой или фиксированной сетке макета.
Краткое описание Grid от консорциума W3C.
Если у вас есть время и желание углубиться в документацию, можете сделать это на сайте консорциума.
Разница между Flexbox и Grid
Главным отличием Grid от Flexbox является количество измерений (осей). При работе только с последним вам придётся выбирать между осью X и осью Y. Иначе говоря, Flexbox может быть направлен на создание только колонок или только строк. Однако эти инструменты не конкурируют друг с другом, поэтому можно применять их вместе.
На иллюстрации ниже можно наглядно ознакомиться с отличительными чертами инструментов:
Вывод таков: CSS Grid Layout — новая и мощная система компоновки, позволяющая с лёгкостью разделить веб-страницу на столбцы и строки.
Полезные ресурсы, уроки и руководства
В последнее время, в связи с включением поддержки Grid в популярные браузеры, появилось огромное количество отличных уроков и вводных пособий по инструменту. Мы внимательно следили за выходившими и выходящими обновлениями и теперь рады представить список ресурсов, которые помогут вам начать работать и экспериментировать с CSS Grid.
Основные понятия в контексте CSS Grid
На этом ресурсе вы найдёте введение в работу с Grid, объяснение механизма работы Grid-контейнера, описание размещения элементов внутри контейнеров и многое другое.
Детальное руководство по CSS Grid
Подробное руководство, покрывающее все детали последней версии Grid. Крис Хаус рассматривает все нужные вам свойства и обозревает высокоуровневые концепты. Кроме того, он подкрепляет это образцами кода и визуальными примерами.
Grid в примерах
Приглашённый эксперт рабочей группы CSS, Рейчел Эндрю, — давний сторонник внедрения Grid в современный веб. Она делится большим количеством примеров о том, как использовать Grid, а также образцами кода, видеоуроками прочими полезными материалами на своём сайте Grid by Example.
В этом видео Рейчел объясняет множество практических примеров с Grid и показывает, как он может использоваться для создания современных адаптивных макетов.
В этом примере Тайлер Стика показывает старый способ построения макетов (с помощью float
) и пытается достичь того же результата с помощью Grid.
Особенности CSS Grid, которые заставляют моё сердце биться быстрее
Фронтенд разработчик Уна Кравец рассказывает о трёх функциях Grid, восхищающих её: включение элемента minmax ()
, использование grid-gap
и названные области.
Практическое использование CSS Grid: добавление Grid в существующий проект
Эрик Мейер рассматривает процесс преобразования существующих CSS наработок в Grid без нарушения их работоспособности в браузерах без поддержки Grid.
Grid-огород
Grid Garden — небольшая и забавная браузерная игра, основанная на написании кода для выращивания моркови в огороде. Это замечательный способ для практики и изучения основ CSS.
Цель моей игры не включает в себя охват всех новых аспектов инструмента CSS Grid. Главное предназначение игры — помочь игрокам развить интуицию и признать потенциал инструмента.
Говорит Томас Парк.
Шпаргалка по CSS Grid
Отличная песочница с качественным визуальным оформлением, которая поможет разобраться с терминологией, свойствами и с тем, как Grid работает в браузере.
Заключение
Данные из скриншота с сайта Can I Use выглядят довольно многообещающе, показывая, что большинство современных браузеров готовы к работе с CSS Grid и могут поддерживать его свойства без префиксов:
Однако компания Microsoft снова разочаровала: на данный момент в браузерах IE и Edge присутствует только частичная поддержка Grid через префикс -ms-
. Сейчас в Microsoft отправлена заявка на развитие поддержки Grid, и она находится в топе по количеству заявителей.
Несмотря на то, что большинство браузеров поддерживает Grid, он работает только в последних версиях этих браузеров (а в некоторых только частично), что составляет только 30–40 % от общего числа используемых браузеров. Если вы не уверены, что подавляющее большинство ваших пользователей имеет последние сборки браузеров с поддержкой Grid, то желательно не экспериментировать с созданием крупномасштабных проектов.
Перевод статьи «Getting started with CSS Grid Layout»
20+ сервисов для изучения CSS Grid и Flexbox разметки
В последнее время при работе с WordPress шаблонами мне все чаще попадается HTML разметка, где вместо олдскульных DIV блоков используется Grid и Flexbox. Я, признаться, все еще откладываю детальное изучения этих подходов из-за отсутствие свободного времени (скорее лени), но постепенно приходится вникать. Ранее в блоге была статья про основы CSS Grid с реальными примерами, а сегодня хочу запостить перевод подборки полезных сервисов для изучения этих двух веб-технологий.
Если вы совсем уж новичок в данной сфере для начала советую ознакомиться с бесплатным курсом обучения верстке с нуля под названием Interneting is Hard. Проект на английском, но реально очень толковый и наглядный. Хотя, думаю, реально найти какие-то отечественные альтернативы.
А теперь непосредственно к нашей теме. Общая особенность большинства ресурсов и материалов, расположенных ниже, в том, что это “Fun places to learn” (как выражается автор оригинальной статьи). То есть они представляют из себя не сухую методичку с текстовой теорией, а являются плюс-минус интерактивными сервисами с элементами игры, онлайн-конструкторами и видео.
Начнем с более новой актуальной инфы. CSS-Grid сейчас стремительно развивается, многие браузеры начали поддерживать данный формат.
Сервисы для обучения Grid Layout
Игры
Grid Garden
Основная ваша задача в этой игре – ухаживать за своим садом и вовремя его поливать. Для ее решения придется использовать те или иные опции CSS Grid. С каждым следующим уровнем количество функций добавляется + увидите пояснения по ним.
CSS Diner
В принципе, здесь вы можете изучить не только Flexbox/Grid, но и потренироваться с разными другими CSS-селекторами. Игра содержит 32 уровня, в меню допускается выбор интересующего вас задания.
Онлайн-генераторы
Тоже весьма полезные инструменты, с помощью которых реально повысить уровень своих навыков. В отличии от разбора готовых примеров из редактора CodePen в виртуальных генераторах есть визуальный понятный интерфейс для заданий тех или иных параметров.
Grid Visual Playground
Прикольный сервис с уже созданной разноцветный сеткой, где можно тестить разные настройки/параметры. Вообще выделение цветом – отличная идея, всегда так делаю с блоками, когда хочу понять их размеры, позиционирование или расположение на странице.
Grid by example
Рассмотрение готовых примеров – отличная возможность изучить и понять логику работы данного механизма. На странице расположены разные вариации сетки.
CSS Grid Generator
Из названия вам все должно быть понятно – это онлайн-генератор, позволяющий вам легко построить свою сетку без коддинга.
CSS Grid Layout Generator
Аналогичный предыдущему проект, но с поддержкой каких-то regions (если честно, не знаю, что это).
CSS Grid Experiments
Подборка интересных вариантов использования CSS-сетки. Есть даже весьма сложные и необычные примеры.
Шпаргалки (Cheatsheets) и статьи по теме
A Complete Guide to Grid
В популярном веб-проекте CSS Tricks имеется достаточно масштабная шпаргалка со всеми свойствами Grid-сетки в одном месте. На английском, но что поделать. Очень большая работа проделала, сам сайт, кстати, тоже весьма полезный.
GRID
Ресурс представляет из себя простую «виртуальную шпаргалку» по разным свойствам. Вы можете копировать соответствующий код просто кликнув по элементам на странице. Креативно!
Learn CSS Grid
Полноценное руководство по нашей теме, созданное в виде одностраничного сайта. Оно состоит из 17ти разделов, помимо текста содержит также и скриншоты.
Introduction to CSS Grid Layout
Кроме теории и примеров здесь интересен пункт про использование Firefox DevTools для работы с Layout-сеткой. В текстах присутствуют примеры кода и анимация/видео. Интересно, есть ли что-то похожее для инструмента разработчиков Chrome Devtools.
Видео
Напоследок не менее полезные материалы – видео.
cssgrid.io
Некто Wes Bos с поддержкой от Firefox создал 25 видео по изучению принципов работы Grid Layout. 4 часа видосов! Супер.
Layout Land – Videos on CSS Grid
Ссылка на Youtube плейлист с уроками по основам Grid-сетки от Jen Simmons. Всего 15 роликов.
How to use CSS Grid layout in 60 seconds!
Достаточно веселая и простая видеодемонстрация определения колонок и рядов за 60 секунд.
Сервисы для изучения Flexbox
Что касается Flexbox, то оригинальная статья с подборой полезных материалов была написана 2 года назад. Однако, не смотря на это, все присутствующие там ссылки все равно оказались рабочими. Базовые понятия по Flexbox можно посмотреть в руководстве Interneting is Hard, которое я упоминал в самом начале статьи.
Типы сервисов здесь аналогичны предыдущему разделу – есть игры, генераторы, Cheatsheets, заметки и т.п.
Flexbox Froggy Game
Начнем с веселых развлекательных ресурсов. Ваша задача «перенести» лягушку на лилии с помощью разных CSS-свойств.
Flexbox Defense Game
Еще одна мини-игра, где нужно будет защищать свою территорию от наступающих врагов.
Visual Guide to CSS3 Flexbox
Пробуйте на практике все доступные свойства веб-технологии дабы понять принцип их использования и синтаксис. Здесь разрешается добавлять/убирать дочерние элементы, выбирать позиционирование и другие опции.
Flexbox Playground
Еще одна площадка для тестирования всевозможных фишек Flexbox – задавайте определенные параметры и смотрите на результат.
Flexplorer
Третий инструмент из той же области, что и предыдущие – тестируйте CSS-Flexbox опции на практике.
Solved By Flexbox
Готовые решения/примеры позволяют понять какие задачи можно решать с помощью этого принципа веб-разметки. Например, раньше вертикальное позиционирование было сущим кошмаром, сейчас это делается гораздо легче.
Flexbox Patterns
С помощью данного типа разметки вы можете создавать не только сетку вебстранички, но и более сложные элементы. На сайте найдете разные паттерны, например, табы, карточки товаров и др.
Guide to Flexbox
Гайд по теме от портала CSS tricks с красочными иллюстрациями, кодом и пояснениями. Подобные материалы полезны не только для изучения вопроса с нуля, но и пригодятся чтобы вспомнить/подсмотреть некоторые нюансы/синтаксис.
Joni Bologna’s fruity Flexbox Cheatsheet
Кроме веб-версии шпаргалки есть ссылка на PDF книгу для скачивания.
Flexbox Cheatsheet By Yoksel
Еще один простой мини-сайт по свойствам Flexbox – ориентирование, выравнивание и др.
Итого. Этих ссылок/ресурсов вам должно с головой хватить дабы разобраться с Grid и Flexbox. Исходя из увиденного и прочитанного, мне кажется, технология CSS-Grid более перспективная (пусть и новая, но почти все современные браузеры ее поддерживают). От Flexbox она отличается возможностью задавать расположение блоков в двух изменениях строках/столбцах и имеет более широкий и гибкий набор функций. Однако для общего развития можно изучить оба направления – при правке HTML-кода готовых адаптивных шаблонов могут встречаться разные варианты. Больше знаний уж точно не помешает.
Руководство Основные CSS Selectors
1- Что такое CSS Selector?
CSS Selector используется для поиска (или выбора) элементов в HTML докумене, чтобы применить к ним стиль (style).
Простой пример:
/** Select all elements with class contains abc */ .abc /** Select element with ID = abc */ #abc
CSS Selectors разделен на 3 следующие виды:
Basic Selectors
Базовые Selector помогают вам выбрать элементы, основываясь на его Name, ID, Class или Attribute.
Базовые Selector будут упомянуты в данной статье.
Combining selectors
Выбрать элементы, основываясь на отношении между ними.
Combinator | Syntax | Example |
Descendant combinator | A B |
div span div .item |
Child combinator | A > B |
ul > li |
General sibling combinator | A ~ B |
p ~ span |
Adjacent sibling combinator | A + B |
h3 + p |
Column combinator | A || B |
col || td |
Pseudo selectors
Pseudo | Syntax | Example |
Pseudo classes | A:B |
a:visited |
Pseudo elements | A::B |
p::first-line |
Universal selector (Универсальный селектор): Выбирает все элементы или все элементы namespace (пространство имен).
Синтаксис:
Selector | Описание |
* | Выбрать все элементы. |
*|* | Выбрать все элементы. |
ns|* | Выбрать все элементы в пространстве имен ns. |
|* | Выбрать все элементы необъявленные в пространстве имен. |
Например выбрать все элементы и настроить для них границы зеленого цвета.
universal-selector-example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Universal Selector: *</title> <style> * { border: 1px solid green; margin: 5px; } </style> </head> <body> <h2>I am h2 element</h2> <div>I am div element</div> <p>I am P element</div> </body> </html>
CSS Type Selector помогает вам найти элементы по имени.
Например, выбрать все элементы <div>:
Например, выбрать все элементы <span>:
type-selector-example1.css
span { background-color: skyblue; }
type-selector-example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Universal Selector: ns|*</title> <link rel="stylesheet" type="text/css" href="type-selector-example1.css" /> </head> <body> <span>I am span element</span> <p>I am P element</p> <span>I am span element</span> </body> </html>
Если CSS Selector имеют одинаковое правило, можно их написать вкратце, CSS Selector будут разделены запятой и использовать одно и то же правило.
type-selector-example2.css
/** Select h2 or h3 */ h2, h3 { color: blue; }
type-selector-example2. html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Type Selector</title> <link rel="stylesheet" type="text/css" href="type-selector-example2.css" /> </head> <body> <h2>I am h2 element</h2> <h3>I am h3 element</h3> <h4>I am h4 element</h4> </body> </html>
CSS Class Selector выбирает элементы, основываясь на значении атрибута (attribute) class.
Например, выбрать все элементы с class = «txt-green» или включая слово «txt-green».
class-selector-example1.css
.txt-green { color: green; } .bg-yellow { background-color: yellow; }
class-selector-example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Class Selector</title> <link rel="stylesheet" type="text/css" href="class-selector-example1.css" /> </head> <body> <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2> <p>I am P element</p> <h3>I am h3 with class = 'txt-green bg-yellow'</h3> </body> </html>
Пример:
class-selector-example2.css
/* <p> with class 'txt-green' or includes 'text-green' */ p.txt-green { color: green; } .bg-yellow { background-color: yellow; } /* <div> with class inculudes both 'text-green' and 'bg-yellow' */ div.txt-green.bg-yellow { color: green; font-style: italic; }
class-selector-example2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Class Selector</title> <link rel="stylesheet" type="text/css" href="class-selector-example2.css" /> </head> <body> <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2> <p class ="txt-green">I am P element with</p> <div>I am DIV with class = 'txt-green bg-yellow'</div> <br/> <span>I am SPAN with class = 'txt-green bg-yellow'</span> </body> </html>
CSS ID Selector помогает вам выбрать элементы основываясь на значении атрибута (attribute) ID, значение атрибута ID должно полностью совпадать со значением, данным Selector. Примечание: CSS ID Selector «не различает прописные и строчные буквы» (Case insensitive)
id-selector-example.css
#demo { color: blue; font-size: 30px; }
id-selector-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>ID Selector</title> <link rel="stylesheet" type="text/css" href="id-selector-example.css" /> </head> <body> <h2 id = "demo">Demo</h2> <span>I am span element</span> <p>I am P element</p> </body> </html>
6- CSS Attribute Selector
CSS Attribute Selector помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.
CSS Grid Layout — Фрилансер по жизни
Пример №1 единица fr
Пример №2 проценты
Пример №3 minmax
Пример №4 auto
Пример №5 repeat
Пример №6 repeat + auto-fill
+ minmax
Пример №7 repeat + auto-fit
+ minmax
Пример №8 areas
fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc(). Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Или:
.grid{
background-color: #eee;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr 1fr;
}
. grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Размеры в % вычисляются от ширины или высоты контейнера-сетки.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: 20% 30% 20%;
grid-template-rows: 80% 120%;
}
Или:
.grid{
background-color: #eee;
display: grid;
grid-template: 80% 120% / 20% 30% 20%;
}
. grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min. Значения в fr можно устанавливать только как максимальное.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: minmax(200px,300px) minmax(100px,200px) minmax(250px,150px);
grid-template-rows: minmax(100px,110%) minmax(50px,1fr);
}
Или:
. grid{
background-color: #eee;
display: grid;
grid-template: minmax(100px,110%) minmax(50px,1fr) / minmax(200px,300px) minmax(100px,200px) minmax(250px,150px);
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Значение auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Как максимум, обрабатывается так же, как и max-content. Может растягиваться за счет свойств align-content и justify-content.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
}
Или:
.grid{
background-color: #eee;
display: grid;
grid-template: auto 1fr / auto 1fr auto;
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
}
Или:
.grid{
background-color: #eee;
display: grid;
grid-template: repeat(2,1fr) / repeat(3,1fr);
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Используя значение auto-fill, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));
}
Или:
.grid{
background-color: #eee;
display: grid;
grid-template: auto / repeat(auto-fill,minmax(150px, 1fr));
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
}
Или:
.grid{
background-color: #eee;
display: grid;
grid-template: auto / repeat(auto-fit,minmax(150px, 1fr));
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
Свойство grid-template-areas определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки. Синтаксис свойства обеспечивает визуализацию структуры сетки, облегчая понимание общего макета контейнера-сетки. Свойство не наследуется.
CSS код:
.grid{
background-color: #eee;
display: grid;
grid-template-columns: 150px 1fr;
grid-template-areas: ‘header header’ ‘sidebar content’ ‘block-1 block-2’ ‘footer footer’;
}
Или:
.grid{
background-color: #eee;
display: grid;
grid-template: auto / 150px 1fr;
grid-template-areas: ‘header header’ ‘sidebar content’ ‘block-1 block-2’ ‘footer footer’;
}
.grid__item{
background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
. grid__item:nth-child(1){
grid-area: header;
}
.grid__item:nth-child(2){
grid-area: sidebar;
}
.grid__item:nth-child(3){
grid-area: content;
}
.grid__item:nth-child(4){
grid-area: block-1;
}
.grid__item:nth-child(5){
grid-area: block-2;
}
.grid__item:nth-child(6){
grid-area: footer;
}
Сетка
CSS: выпуск 2.0 | Webflow Blog
Сегодня мы выпускаем масштабное обновление и серию улучшений для макета сетки, которые сделают разработку адаптивных макетов на основе CSS-сетки проще, чем когда-либо.
Контекст: CSS-сетка 1.0
Запуск сетки CSS еще в октябре 2018 года сделал верстку в Webflow значительным шагом вперед. Но при этом возникли две проблемы:
- Неуклюжие рабочие процессы адаптивного дизайна. Позиционированные вручную дочерние элементы сетки необходимо было отрегулировать для каждой точки останова, а изменения самой сетки между точками останова потребовали дальнейшего перемещения элементов, чтобы они соответствовали новому набору строк и столбцов.
- Нет поддержки списков коллекций. Без управляющей логики о том, как распределять дочерние элементы в родительской сетке, не было возможности поддерживать управляемый CMS список коллекций, список продуктов электронной коммерции или список результатов поиска.
К счастью, сегодняшний выпуск решает обе эти проблемы — и предоставляет массу возможностей для макета сетки CSS в Webflow.
Grid 2.0: сделать адаптивный дизайн еще проще
Но, увы, у экранов обычно есть второе измерение, о котором нам нужно беспокоиться.
К сожалению, вы не сможете самостоятельно подобрать размер элементов.
и вертикальный и горизонтальный ритм, просто используя только flexbox. Это
где на помощь приходит CSS Grid.
CSS Grid находился в разработке и был отмечен флагом в большинстве браузеров более
5 лет и дополнительное время было потрачено на совместимость, чтобы избежать
глючный запуск, как у Flexbox. Итак, если вы используете сетку для реализации макета в
Chrome, скорее всего, вы получите тот же результат в Firefox и Safari. На
на момент написания, реализация Grid в Microsoft Edge устарела (
то же, что уже было в IE11.) и обновление
«на рассмотрении».
Несмотря на сходство концепции и синтаксиса, не думайте о Flexbox и Grid.
как конкурирующие методы компоновки. Сетка организована в двух измерениях, а Flexbox
выкладывается в один. Их совместное использование дает синергетический эффект.
Определение сетки
Для ознакомления с отдельными свойствами Grid настоятельно рекомендую
Сетка на примере Рэйчел Эндрю или приемы CSS »
Шпаргалка. если ты
знакомы с Flexbox, многие свойства и их значение должны быть
привычный.
Давайте посмотрим на стандартную сетку из 12 столбцов. Классическая 12-колоночная
макет популярен, так как число 12 делится на 2, 3, 4 и 6, и
поэтому полезно для многих дизайнов. Реализуем такой макет:
Начнем с кода разметки:
В нашей таблице стилей мы начинаем с расширения нашего тела
, чтобы он покрыл все
окно просмотра и превращение его в контейнер сетки :
html, body {
ширина: 100ввт;
мин-высота: 100vh;
маржа: 0;
отступ: 0;
}
тело {
дисплей: сетка;
}
Теперь мы используем CSS Grid. Ура!
Следующим шагом будет реализация строк и столбцов нашей сетки. Мы могли бы
реализовать все 12 столбцов в нашем макете, но поскольку мы не используем каждый столбец,
это сделало бы наш CSS излишне беспорядочным. Ради простоты,
реализуем макет так:
Верхний и нижний колонтитулы имеют переменную ширину, а содержимое изменяется в
оба измерения. Навигация также будет изменяться в обоих измерениях, но мы
собираюсь наложить на него минимальную ширину 200 пикселей.(Почему? Чтобы показать особенности
CSS Grid, конечно.)
В CSS Grid набор столбцов и строк называется дорожек . Давайте начнем с
определяя наш первый набор треков, строк:
body {
дисплей: сетка;
сетка-шаблон-строки: 150 пикселей автоматически 100 пикселей;
}
grid-template-rows
принимает последовательность размеров, которые определяют отдельные строки.
В этом случае мы даем первой строке высоту 150 пикселей, а последней — 100 пикселей.
В среднем ряду установлено значение auto
, что означает, что он будет адаптироваться к необходимому
высота для размещения элементов сетки (дочерние элементы контейнера сетки ) в
этот ряд.Поскольку наше тело растянуто на всю область просмотра, дорожка
содержащий контент (желтый на картинке выше), по крайней мере, заполнит все
доступное пространство, но будет увеличиваться (и заставлять документ прокручиваться), если это
необходимо.
Для столбцов мы хотим применить более динамичный подход: нам нужны и навигация, и
контент будет расти (и сжиматься), но мы хотим, чтобы навигация никогда не сжималась ниже 200 пикселей
и мы хотим, чтобы контент был больше, чем nav. В Flexbox мы использовали бы flex-grow и
flex-shrink, но в Grid все немного иначе:
body {
дисплей: сетка;
сетка-шаблон-строки: 150 пикселей автоматически 100 пикселей;
сетка-шаблон-столбцы: minmax (200px, 3fr) 9fr;
}
Мы определяем 2 столбца. Первый столбец определяется с помощью
minmax ()
функция, которая принимает 2 значения: минимальный и максимальный размер этой дорожки.
(Это как min-width
и max-width
в одном.) Минимальная ширина, как мы
обсуждалось ранее, 200 пикселей. Максимальная ширина — 3fr
. fr
зависит от сетки
блок, позволяющий распределить доступное пространство между элементами сетки.
( fr
, вероятно, означает «дробная единица», но вскоре может также означать «свободную единицу».)
Наши значения здесь означают, что оба столбца будут расти, чтобы заполнить экран, но
столбец содержимого всегда будет в 3 раза шире столбца навигации (при условии, что
столбец навигации остается шире 200 пикселей).
Хотя размещение наших элементов сетки еще не правильно, размер
строки и столбцы ведут себя правильно и дают поведение, к которому мы стремились:
Размещение предметов
Одна из самых мощных функций Grid — возможность размещать предметы без
Что касается порядка DOM. (Хотя, поскольку программы чтения с экрана перемещаются по DOM,
мы настоятельно рекомендуем вам для правильного доступа помнить о том, как
вы меняете порядок элементов.) Если размещение вручную не выполняется, элементы размещаются
в сетке в порядке DOM слева направо и сверху вниз. Каждый элемент
занимает одну ячейку . Порядок заполнения сетки можно изменить с помощью
сетка-автопоток
.
Итак, как нам размещать элементы? Возможно, самый простой способ разместить элементы сетки — это
определяя, какие столбцы и строки они покрывают.Grid предлагает для этого два синтаксиса:
В первом синтаксисе вы определяете начальную и конечную точки. Во втором вы определяете
начальная точка и пролет:
заголовок {
сетка-столбец: 1/3;
}
nav {
сетка-ряд: 2 / пролет 2;
}
Мы хотим, чтобы наш заголовок начинался в первом столбце и заканчивался перед третьим столбцом.
Наша навигация должна начинаться со второго ряда и охватывать всего 2 ряда.
Технически мы закончили реализацию нашего макета, но я хочу показать вам несколько
удобные функции, которые предоставляет Grid, чтобы упростить размещение.В
Первая особенность заключается в том, что вы можете назвать границы трека и использовать эти имена для
размещение:
body {
дисплей: сетка;
сетка-шаблон-строки: 150 пикселей [начало навигации] автоматически 100 пикселей [конец навигации];
столбцы-шаблон-сетки: [начало-заголовка] minmax (200 пикселей, 3fr) 9fr [конец-заголовка];
}
header {
столбец сетки: начало заголовка / конец заголовка;
}
nav {
сетка-строка: начало навигации / конец навигации;
}
Приведенный выше код даст тот же макет, что и предыдущий.
Еще более мощной является функция именования целых регионов в вашей сетке:
body {
дисплей: сетка;
сетка-шаблон-строки: 150 пикселей автоматически 100 пикселей;
сетка-шаблон-столбцы: minmax (200px, 3fr) 9fr;
grid-template-area: "заголовок"
"навигационное содержимое"
"нижний колонтитул навигации";
}
header {
grid-area: header;
}
nav {
область сетки: nav;
}
grid-template-area
принимает строку разделенных пробелами имен, что позволяет
разработчик присвоить каждой ячейке имя. Если две соседние ячейки имеют одинаковое имя,
они собираются объединиться в одну и ту же область. Таким образом, вы можете предоставить больше
семантики вашего кода макета и сделать медиа-запросы более интуитивно понятными. Опять же, это
код сгенерирует тот же макет, что и раньше.
Есть еще?
Да, да, есть, слишком много, чтобы осветить в одном сообщении.
Рэйчел Эндрю, которая также
GDE, приглашенный
Эксперт в рабочей группе CSS и работает с ними с самого начала
чтобы убедиться, что Grid упрощает веб-дизайн.Она даже написала
книга об этом. Ее
веб-сайт Grid By Example — ценный
ресурс для знакомства с Grid. Многие думают, что Grid — это
революционный
шаг для веб-дизайна, и теперь он включен по умолчанию в Chrome, поэтому вы можете начать
используя это сегодня.
Как использовать и обнаруживать возможности CSS grid masonry layout
Совершенно новые CSS masonry Layout функциональные возможности, поставляемые с CSS grid, в конечном итоге появятся в браузерах.
В этом посте рассказывается о том, что вам нужно сделать, чтобы начать работу и реализовать макет каменной кладки на ваших сайтах, и объясняется обнаружение функций в CSS и JavaScript.Мы не будем вдаваться в подробности компоновки каменной сетки. Если вы хотите погрузиться в тему, найдите дополнительные ресурсы в конце статьи.
Это реализация моего сайта для браузеров, которые поддерживают или не поддерживают новый макет каменной сетки.
Слева вы видите стандартный макет сетки CSS. К сожалению, с содержимым сетки есть одна проблема. Включенные секции и участки существенно различаются по высоте. Некоторые элементы содержат всего несколько записей, тогда как другие включают более тридцати записей.Размещение этих разделов рядом друг с другом в сетке приводит к появлению большого количества пустых пробелов. Вот почему я вручную настроил отдельные ячейки, чтобы они занимали несколько столбцов.
Например, область для CSS
охватывает три строки с использованием строки сетки : auto / span 3
. Подобно большинству ручных настроек, это далеко не идеально.
.area-css {
сетка-ряд: авто / промежуток 3;
}
В этих ситуациях сетка кладки вступает в игру и сияет.Это позволяет максимально эффективно использовать все доступное пространство без ручной регулировки. 🎉
Справа элементы для каждой области автоматически регулируются в зависимости от их высоты. Сетка раскладывается автоматически. Это красиво!
Сетка каменной кладки основана на CSS, аналогично фрагменту, который вы найдете в документации MDN для сетки CSS с каменной кладкой.
.container {
дисплей: сетка;
разрыв: 10 пикселей;
сетка-шаблон-столбцы: повтор (автозаполнение, minmax (120 пикселей, 1fr));
сетка-шаблон-ряды: кладка;
}
Приведенный выше код ведет к сетке, подобной моей и приведенной ниже.
CSS masonry еще не поддерживает кроссбраузерность
Перво-наперво. На момент написания кроссбраузерная поддержка макета сетки каменной кладки. Когда вы посмотрите на caniuse.com макет каменной кладки, вы обнаружите, что браузера нет вообще. Ни один браузер не поставляет макеты каменной кладки, и только Firefox спешит вперед с реализацией за флагом.
Для начала откройте Firefox и откройте about: config
(вы можете ввести его в адресную строку) и включите логический флаг для макета .css.grid-template-masonry-value. включено
.
После того, как вы включили макет каменной сетки, переходите к моему обзору TIL. Вас поприветствуют праздничное послание, конфетти и сетка из каменной кладки, охватывающая всю страницу.
Обнаружение новых функций CSS, таких как разметка каменной сетки
Есть один важный факт относительно принятия функций веб-платформы. Вы не можете просто добавить новые и лишь частично поддерживаемые функции в свой CSS и прекратить работу. Вы всегда должны учитывать резервное поведение.
Ухудшается ли новая функция? Все ли по-прежнему работает, когда браузер не поддерживает это? Является ли новая функция веб-платформы критически важной или вполне нормально, если она не работает?
Эти вопросы важны для обеспечения хорошего взаимодействия с пользователем, и поэтому мой сайт включает в себя обнаружение функций в CSS и JavaScript для определения запасного поведения.
Обнаружение функций в CSS
Чтобы проверить, поддерживает ли браузер новую функцию CSS, используйте запрос функции @supports
.Используйте запрос функции с объявлением CSS, которое вы хотите протестировать, и примените свой CSS, если браузер поддерживает или не поддерживает новую функцию CSS.
Я добавил новый класс ( list-masonry
) в свою базу кода, который должен применять макет masonry, если браузер поддерживает его.
@supports (grid-template-rows: кладка) {
.list-masonry {
стиль списка: нет;
маржа: 0;
отступ: 0;
дисплей: сетка;
сетка-разрыв: var (- сетка-разрыв);
столбцы-шаблон-сетки: повтор (автозаполнение, minmax (16em, 1fr));
сетка-шаблон-ряды: кладка;
}
}
Кроме того, чтобы скрыть и показать сообщение о праздновании, я добавил новый служебный класс.Класс работает аналогично классам, таким как hide-on-small
, которые скрывают элементы в зависимости от размеров области просмотра.
Отличие от классов, зависящих от области просмотра, заключается в том, что show-if-supports-masonry
не полагается на медиа-запрос, а на запрос функции.
show-if-supports-masonry
изначально устанавливает свойство display
элемента на none
. Если браузер поддерживает макет кирпичной кладки, запрос функции перезаписывает «скрытый CSS» с отображением : блок
.
.show-if-supports-masonry {
дисплей: нет;
}
@supports (grid-template-rows: кладка) {
.show-if-supports-masonry {
дисплей: блок;
}
}
В сочетании со следующим HTML-кодом я могу показать праздничное сообщение в зависимости от поддержки функции браузера.
🎉 Похоже, ваш браузер поддерживает сетку кладки ... Крутые бобы! 🎉
Обнаружение функций в JavaScript
До сих пор я применил макет сетки кладки и показал отличное сообщение, когда он поддерживался. Но я хотел еще больше отметить первых последователей!
Люди, которые просматривают мой сайт и, возможно, даже подписались на мой информационный бюллетень, могут знать, что у меня есть каноны конфетти в нескольких областях моего сайта.
Небольшая хитрость: Вы можете добавить конфетти на свой сайт без каких-либо инструментов, используя скайпак. Skypack — это CDN для пакетов JavaScript, которые предоставляют модули ES. Чтобы добавить канон конфетти на свой сайт, все, что вам нужно сделать, это:
- добавить
Интересной частью этого фрагмента конфетти является обнаружение функции CSS с использованием
CSS.поддерживает
. Это позволяет обрабатывать неподдерживаемые функции CSS в JavaScript. Если для вашего сайта необходима функция CSS, вы можете загрузить полифиллы или предложить альтернативный вариант.Сегодня я люблю Интернет и его возможности!
Это было для реализации CSS grid Masonry на моем сайте. Не поддерживающие браузеры показывают сетку с ячейками, занимающими несколько столбцов. Для моего сайта этого достаточно!
С другой стороны, сайт включает конфетти и сетку, которая не тратит зря, и место на экране для поддержки браузеров.
И вся эта функциональность определяется с помощью
@supports
в CSS илиCSS.
в JavaScript. 🎉supports
Дополнительные ресурсы
CSS Grid в IE11: это возможно! И не так сложно, как вы думаете
Да, это возможно! Но вам решать, что поддерживается, а что нет. Я сэкономлю вам исследование и дам вам все, что я нашел в CSS Grid в IE11.
Если вы посмотрите на caniuse, IE11 частично поддерживает сетку CSS.Но что это значит? В основном поддерживается все из этой версии сетки ... иначе: ничего, на что вы можете положиться, если вы привыкли к современной сетке.
Вам понадобится поддерживаемый препроцессор или префиксатор CSS, чтобы предоставить вам все полифиллы, необходимые для того, чтобы насладиться великолепием сетки в старых браузерах.
Не существует решения, которое бы заполняло все за вас. Вам все еще нужно знать ограничения сетки в IE11 и знать, какие ручные полифиллы вам нужно будет написать, если вы хотите использовать такие методы, как
repeat ()
или реквизиты, такие какgrid-gap
.Вам также необходимо явно указать каждому элементу сетки, где он должен находиться в сетке, то есть: вам нужно добавить класс к каждому элементу и указать ему, где начать, конец / диапазон. (Да, это настоящая боль, но вам нужна сетка в IE11 или нет?)
Хорошие новости!
повтор
поддерживается! Это просто синтаксически другое. Вместоgrid-template-columnds: repeat (6, 1fr 100px)
вам придется вручную записать-ms-grid-columns: (1fr 100px) [6]
для IE11.охватывать
span
как вgrid-column: span 1 / -1
не поддерживается.Позиционирование ребенка
Позиционирование элементов сетки. Я упоминал об этом ранее, но важно повторить, чтобы вы не рвали волосы после всего, что я сказал. Элементы сетки должны быть явно «помещены» в сетку. И, к сожалению, вы не можете выбрать каждого ребенка с
: first-child
или: last-child
и так далее.Вы должны создать уникальные классы для каждого ребенка и указать им, где начать и где закончить в вашей сетке.
Знайте свою странность IE11
Еще одна вещь, о которой нужно знать ... по умолчанию отображение
: блок
ведет себя иначе в IE11.Обычно, если у вас есть родительский контейнер с содержимым внутри, родительский контейнер по умолчанию будет размером содержимого. В IE11 родительский элемент по умолчанию равен ширине соответствующего родительского элемента. Ни в одной из прочитанных мною статей об этом не упоминалось, что говорит о том, что на самом деле они не тестировались в IE11. Или прочтите спецификации. Но я сделал для тебя, так что тебе не нужно.сетка
grid-gap
, тоже моя любимая функция CSS-сетки, не поддерживает IE11. Но вы справитесь, если сделаете дополнительные столбцы / строки, которые будут действовать как ваши пробелы.все авто
grid-auto-rows
иgrid-auto-columns
не поддерживаются, потому что IE11 может только автоматически создавать столбцы и строки в зависимости от размера содержимого, которое он содержит в сетке.Поэтому, если вы попытаетесь явно указать размер с
автоматическими строками или столбцами
, по умолчанию он будет автоматически.автозаполнение
иавтозаполнение
также не будут работать, потому что IE11 не имеет концепции автоматического размещения. Хотя есть способы его взломать с помощью автопрефикса.Но
minmax ()
будет работать! Только не сauto-fill
илиauto-fit
.стенография
Сокращенные реквизиты, такие как
fit-content ()
иgrid
, не будут работать, но они будут работать, если вы напишете их от руки.встроенные элементы
Если какие-либо из ваших элементов сетки являются
встроенными элементами
, они не будут учитывать сетку. AKA вашохватывает теги
иa
.Но большинство людей не осознают, что какие-либо новые элементы HTML5 не будут распознаваться IE11, и он будет рассматривать их как, охватывающий
с, и вставлять их.Поэтому вам нужно явно отобразить их как
clock
, напримерmain
,header
,footer
и т. Д.К счастью, normalize CSS делает это за вас ... но проверьте свой компилятор или препроцессор, чтобы убедиться, что они делают.
Это лишь верхушка айсберга. Прочтите статью о трюке CSS, чтобы узнать больше о том, что поддерживается.
Не любите заполнять код вручную? Круто, я тоже. Попробуйте эти библиотеки ...
Автоприставка
Сейчас уже есть много замечательных статей, в которых говорится об этом, и почти все они заканчиваются одним и тем же решением, используйте автопрефиксер, который, кажется, имеет полифилы почти для всего ...
Почти все ... но есть еще некоторые вещи, которые нужно полифиллировать вручную.
Если вы согласны добавить еще одну зависимость, на autoprefixer есть много контента, который действительно кажется проверенным и верным решением (почти для всего).
Но ... Я стараюсь по возможности избегать добавления зависимостей. Поэтому вместо этого я изучил то, что использую в настоящее время, чтобы увидеть, есть ли что-то родное, что я мог бы использовать.
Стилизованные компоненты
Я работаю над устаревшей кодовой базой, в которой используются комбинированный стилус и стилизованные компоненты. Мы пытаемся переместить все в стилизованные компоненты, поэтому сначала я поискал там полифилы. Autoprefixer не будет работать, потому что он компилируется во время сборки, а стилизованные компоненты находятся во время выполнения.Оставляя меня полагаться исключительно на стилизованные компоненты для нативного решения, которое, к сожалению, использует для компиляции стили
Я бы сказал «пока», но вопрос открыт уже 2 года без обновлений. Я большой поклонник стилизованных компонентов, так что это было большим разочарованием.
Стилус
Вот и искал решение в стилусе.
К счастью, мы используем
kouto-swiss
для нашей компиляции (и множества других интересных функций стилуса), которые включают полифиллы для сетки в IE11... почти все из них. Мне пришлось провести некоторое тестирование, чтобы увидеть, что он на самом деле делает, потому что в документации утверждалось, что у него есть полифилы для всего, включая вещи, которые не поддерживаются в IE11, напримерgrid-auto-flow
.- сетка
- сетка
- сетка-автоколонны
- сетка-автопоток
- сетка-автопозиция
- автоматическая сетка
- сетка-столб
- сетка-столбец-конец
- начало столбца сетки
- сетка рядная
- конец ряда сетки
- сетка-ряд-начало
- сетка-шаблон
- сетка-шаблон-области
- сетка-шаблон-столбец
- сетка-шаблон-строки
К сожалению, он не сообщает мне, для каких версий IE11 это были полифилы... Итак, я немного покопался, чтобы увидеть, чем ограничиваются полифилы.