В предыдущей лекции мы рассмотрели спецификацию flexbox. Многим верстальщикам может показаться, что это «швейцарский нож» для того, чтобы делать раскладки в вебе. Но это не так. Если вам показалось, что я заостряю на этом внимание, то я вас точно обманул. У flexbox есть недостатки. Два ключевых из них следующие: во-первых, вертикально расположенные элементы никак не связаны друг с другом. То есть, например, вы не можете выровнять их границы. Другой недостаток это то, что порядок элементов требует предварительных договоренностей. Есть похожее свойство, которое также требует договоренностей – z-index, и если вы их заранее не оговорите, то у вас легко верстка перестанет быть неконтролируемой и станет сложной в поддержании. Еще один недостаток спецификации flexbox сложно заметить сразу же. Для этого нужно обратиться к области дизайна. Рассмотрим этот недостаток на примере. На данной картинке изображен панельный дом. В чем основное преимущество панельных домов перед всеми остальными? Оно заключается в том, что для того чтобы сконструировать планировки в таком доме, их не нужно изобретать, так как дом собирается из готовых модулей и, соответственно, планировка подчиняется этим модулям. В мире дизайна и в мире Интернета есть похожая техника. Она называется «модульная система верстки». Давайте рассмотрим на примере. В данном случае мы применяем модульную систему верстки. Для того чтобы это увидеть, достаточно показать сетку. И теперь мы видим, что текст у нас выстраивается по колонкам и столбцам. Другой пример также использует модульную систему верстки с точно таким же шагом, с точно таким же количеством столбцов и строк. Модульная система верстки – это система верстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом – модулем, одинаковым или разным по горизонтали и вертикали. В мире CSS есть спецификация, которая позволяет реализовать модульную систему верстки. Она называется CSS Grid Layout. В настоящее время спецификация Grid реализована и работает во всех браузерах. Что из себя представляет grid разметка? При grid разметке содержимое контейнера позиционируется и выравнивается относительно сетки. Сетка – это набор пересекающихся вертикальных и горизонтальных линий, которые делят контейнер на зоны, внутри которых будут располагаться элементы верстки. Основой сетки являются строки и столбцы, а для того чтобы их задать, есть специальные CSS свойства: grid-template-columns и grid-template-rows. В данном случае мы задаем 3 строки и 5 столбцов с фиксированными размерами. Как вы понимаете, преимущества grid разметки не в задании фиксированной сетки. Главное ее преимущество – в задании сетки, которая подстраивается под контент. В данном случае я использовал два значения: первое – знакомое вам auto, автоматически выстраивать ширину под контент. Другое работает еще более интересно. Оно похоже на свойство flex grow. Но только называется flex factor. В данном случае элемент со значением 2fr всегда будет в два раза больше, чем элемент со значением 1fr. Ну, элемент в данном случае это – колонока. Давайте рассмотрим на примерах, как позиционировать элементы с помощью grid разметки. HTML может выглядеть как-то так: у нас есть обертка и шесть элементов внутри нее. Для того чтобы задать grid разметку, нам нужно обертке сказать свойство display со значением grid. Для того чтобы указать положение элемента, мы можем воспользоваться свойствами grid-column-start; grid-column-end; grid-row-start и grid-row-end. В данном случае я хотел бы отметить, что значения данных свойств, это не соответствующие колонки, а левые или верхние границы соответствующих элементов. То есть столбцов и строк. То есть мы говорим, что элемент начинается от левой границы первой колонки и заканчивается у левой границы второй колонки. То же самое с grid-row-start и grid-row-end: элемент начинается у верхней границы первой строки и заканчивается у верхней границы второй строки. Другой пример: мы можем поместить элемент в середину. В данном случае мы начинаемся у левой границы третьей колонки и заканчиваемся у левой границы четвертой колонки, и то же самое со строками. Элемент может быть вытянут вдоль строк или столбцов. В данном случае я говорю, что элемент заканчивается у левой границы шестой колонки. Этой колонки не существует, но можно представить, что как будто бы она там была. Понятно, что задавать положение элементов, каждый раз прописывая четыре свойства, достаточно долго. Поэтому есть свойство группирующее. Можно сказать просто grid-column и через дефис указать соответствующее значение, а также есть группирующее все эти свойства – свойство grid-area. Здесь важно отметить, в каком порядке указываются соответствующие левые и верхние границы. В спецификации Grid есть еще один способ задавать положение элементов в grid разметке: с помощью шаблонов. Для того чтобы задавать положение элементов с помощью шаблонов, нужно этот шаблон определить. В данном случае мы определяем шаблон в свойстве grid-template-areas. Важно заметить, что строка в шаблоне группируется с помощью двойных кавычек. Первая строка у нас полностью соответствует одной ячейке. Как будто бы мы сказали colspan = 5. Дальше у нас во второй строке – 3 столбца, в третьей строке у нас 2 столбца. Для того чтобы спозиционировать элемент в соответствующую ячейку, дальше мы пользуемся свойством grid-area, и говорим название именованной области. Если мы говорим grid-area h, то элемент располагается во всю первую строку, как мы определили ранее в шаблоне. И так далее мы можем задавать определенное положение элементов в шаблоне. В данном видео мы поговорили о том, как создавать разметку с использованием спецификации Grid и используя модульную систему верстки.
