Где все находится в рабочем макете CSS Grid

Рекомендации по инструментам перетаскивания

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

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

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

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

Упрощенная подсетка была предложена

Подсетка, как вы уже догадались, является сеткой внутри сетки. Чтобы сделать элемент сетки подсетью, вам нужно использовать свойство display: subgrid . Если вы прочитали мою вводную статью о сетке , вы могли заметить, что не было упоминания о подсетках. Это потому, что хотя концепция звучит достаточно просто, подсетка со всеми ее крошечными деталями довольно сложно объяснить в одном разделе вводного руководства. Это еще сложнее реализовать.

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

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

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

Было предложено еще одно упрощение. До сих пор вы могли устанавливать значения свойств, таких как grid-template-columns и grid-template-rows subgrid качестве subgrid . Таким образом, вы можете создавать подсетки только в одном направлении. Например, если вы установите для grid-template-columns значение subgrid , размер столбцов будет рассчитываться на основе размера дорожки, определенного в основной сетке, но строки будут иметь автоматический размер.

Теперь subgrid может стать отображаемым значением вместо значения grid-template-* . Это запретит поведение подсетей вдоль одной оси. В случаях, когда подсетка не является элементом сетки в своей родительской сетке, ее display значение будет вычисляться в grid .

Новые правила подсчета столбцов в неявной сетке

Прежде чем мы пойдем дальше, я хотел бы объяснить разницу между неявной и явной сеткой:

• Явная сетка — свойства, такие как grid-template-rows grid-template-columns , grid-template-columns и grid-template-areas определяют фиксированное количество дорожек, которые образуют явную сетку, сетку, которую вы явно создали, предоставляя свои собственные значения.
• Неявная сетка — если вы разместите некоторые элементы сетки за пределами этой сетки, контейнер сетки будет генерировать неявные дорожки сетки, добавляя неявные линии сетки в сетку. Эти линии вместе с явной сеткой образуют нашу неявную сетку.

Рассмотрим следующий CSS:

 .grid-container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: auto; grid-auto-columns: 100px; } .element-b { grid-column-start: 2; grid-column-end: 6; grid-row-start: 1; grid-row-end: 2; } 

Здесь я явно указал ширину первых 3 столбцов для моей сетки, используя grid-template-columns . Ширина остальных столбцов, если они должны быть созданы, будет равна 100 пикселей каждый. Для элемента B я установил начальный столбец равным 2, а конечный столбец — равным 6. Поскольку в исходной сетке не было 6 столбцов, браузер автоматически создаст остальные столбцы для соответствия .element-b . Полная структура сетки, включая сетки, созданные браузером, образует неявную сетку:

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