Основные понятия 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.
Управление перекрывающимся контентом
В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью
.
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 треков: за треком шириной
следует трек шириной 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
означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке.
.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-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 и показывает, как он может использоваться для создания современных адаптивных макетов.
Базовые 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{
}
Размеры в % вычисляются от ширины или высоты контейнера-сетки.
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{
}
Функция 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{
}
.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__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: сделать адаптивный дизайн еще проще
для вашего контейнера, чтобы добавить CSS-сетку
9, используйте контейнер элемент и установите его в сетку.
Задайте столбцы и строки вашей сетки, используя grid-template-columns
и grid-template-rows
.
Установите значение строки по умолчанию для всех будущих строк с помощью grid-auto-rows
.
Используйте единицы «дробь» или «fr», чтобы изменить размер столбцов и строк для получения пропорциональных или равных значений.
Изучите CSS Grid за 5 минут
Grid имеют фундаментальное значение для дизайна веб-сайтов, а модуль CSS Grid — самый мощный и простой инструмент для его создания.Я лично считаю, что это намного лучше, чем, например, Bootstrap (почему, читайте здесь).
Модуль также получил встроенную поддержку со стороны основных браузеров (Safari, Chrome, Firefox, Edge), поэтому я считаю, что всем интерфейсным разработчикам придется изучить эту технологию в недалеком будущем .
В этой статье я максимально быстро ознакомлю вас с основами CSS Grid. Я опущу все, что вас не должно волновать, пока вы не поймете основы.
Я также создал бесплатный курс CSS Grid. Щелкните здесь, чтобы получить полный доступ к
it.
Как вариант, посмотрите эту статью, в которой объясняется, что вы узнаете на протяжении всего курса:
А теперь давайте перейдем к делу!
Ваш первый макет сетки
Два основных компонента CSS-сетки — это обертка (родительский) и
элементы (дочерние). Обертка — это фактическая сетка, а элементы — это содержимое внутри сетки.
Вот разметка для упаковки с шестью элементами:
1
2
3
4
5
6
Чтобы превратить нашу оболочку div
в сетку , мы просто даем ей отображение сетки
:
Но это еще ничего не делает, так как мы не определили, как мы хотим сетка, чтобы выглядеть.Он просто сложит 6 div
друг на друга.
Я добавил немного стиля, но это не имеет ничего общего с сеткой CSS.
Столбцы и строки
Чтобы сделать его двумерным, нам нужно определить столбцы и строки. Давайте создадим три столбца и две строки. Мы будем использовать свойства grid-template-row
и grid-template-column
.
Поскольку мы написали три значения для grid-template-columns
, мы получим три столбца. Мы получим две строки, поскольку мы указали два значения для
grid-template-rows
.
Значения определяют ширину столбцов (100 пикселей) и высоту строк (50 пикселей). Вот результат:
Чтобы убедиться, что вы правильно понимаете взаимосвязь между значениями и тем, как выглядит сетка, также взгляните на этот пример.
.wrapper {
дисплей: сетка;
сетка-шаблон-столбцы: 200 пикселей 50 пикселей 100 пикселей;
сетка-шаблон-строки: 50 пикселей 50 пикселей;
}
Попытайтесь понять связь между кодом и макетом.
Вот как это происходит:
Размещение элементов
Следующее, что вам нужно научиться, — как размещать элементы в сетке. Здесь вы получаете суперсилы, так как это упрощает создание макетов.
Давайте создадим сетку 3×3, используя ту же разметку, что и раньше.
.wrapper {
дисплей: сетка;
сетка-шаблон-столбцы: 100 пикселей 100 пикселей 100 пикселей;
сетка-шаблон-строки: 100 пикселей 100 пикселей 100 пикселей;
}
Это приведет к следующему макету:
Обратите внимание, мы видим только сетку 3×2 на странице, тогда как мы определили ее как сетку 3×3. Это потому, что у нас есть только шесть элементов, которыми нужно заполнить сетку. Если бы у нас было еще три, то была бы заполнена и самая нижняя строка.
Чтобы расположить и изменить размер элементов, мы настроим их таргетинг и используем свойства grid-column
и grid-row
:
.item1 {
начало столбца сетки: 1;
конец столбца сетки: 4;
}
Здесь мы говорим, что мы хотим, чтобы элемент 1 начинался на первой линии сетки и заканчивался на линии четвертого столбца. Другими словами, он займет всю строку.
Вот как это будет выглядеть на экране:
Вы не понимаете, почему у нас 4 строки столбца, когда у нас только 3 столбца? Взгляните на это изображение, где я нарисовал линии столбцов черным цветом:
Обратите внимание, что теперь мы используем все строки в сетке. Когда мы заставили первый элемент занять всю первую строку, он сдвинул остальные элементы вниз.
Наконец, я хотел бы показать более простой способ написания синтаксиса выше:
Чтобы убедиться, что вы правильно поняли эту концепцию, давайте немного переставим элементы.
.item1 {
начало столбца сетки: 1;
конец столбца сетки: 3;
}
.item3 {
сетка-начало-строки: 2;
конец ряда сетки: 4;
}
.item4 {
начало столбца сетки: 2;
конец столбца сетки: 4;
}
Вот как это выглядит на странице. Постарайтесь понять, почему это так выглядит. Это не должно быть слишком сложно.
Вот и все!
Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba — самого простого способа научиться программировать. Вам следует посетить наш учебный курс по адаптивному веб-дизайну, если вы хотите научиться создавать современный веб-сайт на профессиональном уровне.
Щелкните здесь, чтобы перейти на курс повышения квалификации.CSS Grid — Вернулась верстка таблицы. Будьте там и будьте честны. | Веб
Сурма — участник Web Fundamentals
TL; DR
Если вы знакомы с Flexbox, Grid покажется вам знакомым.
Рэйчел Эндрю поддерживает отличные
веб-сайт, посвященный CSS Grid, чтобы помочь вам получить
началось. Сетка теперь доступна в Google Chrome.
Flexbox? Сетка?
За последние несколько лет CSS Flexbox стал широко использоваться и поддержка браузера выглядит действительно хорошо (если только вы не один из тех бедняг, которые должны поддерживать IE9 и ниже).Flexbox упростил множество сложных задач компоновки, например, равноудаленное расстояние между элементами, макеты сверху вниз или Святой Грааль волшебства CSS: вертикальное центрирование.
Но, увы, у экранов обычно есть второе измерение, о котором нам нужно беспокоиться. К сожалению, вы не сможете самостоятельно подобрать размер элементов. и вертикальный и горизонтальный ритм, просто используя только 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 это были полифилы... Итак, я немного покопался, чтобы увидеть, чем ограничиваются полифилы.