Как создать простой макет с помощью CSS Grid Layouts

Если вы когда-либо занимались полиграфическим дизайном, вы знаете, откуда возникла идея макетов сетки. Сетка — это точный инструмент измерения, используемый для размещения элементов дизайна на странице. Эта идея часто используется в Интернете, чтобы сделать контент организованным и унифицированным, что делает просмотр более удобным для ваших пользователей.

Когда практика веб-дизайна была новой, макеты были довольно простыми. Заголовок, боковая панель, область содержимого и нижний колонтитул. Теперь, по мере развития Интернета, наши макеты стали более сложными, и нам как веб-дизайнерам приходится сталкиваться с гораздо большим количеством задач. Нам часто нужны многочисленные области контента, адаптивный дизайн, дизайн шаблонов с несколькими макетами страниц и многое другое. И чтобы реализовать дизайн и заставить его отображаться правильно, необходимы плавающие элементы и позиционирование. Поплавки кажутся простыми, но иногда с ними может быть сложно работать.

К счастью, сетка обеспечивает более простой способ проектирования и отображения веб-контента. Это прекрасное время для дизайнера, потому что CSS Grid Layouts быстро набирает обороты. Может показаться, что сетки были новой идеей в веб-дизайне в последние годы, но верите вы или нет, CSS Grid Layouts находится в разработке уже много лет. Браузерная поддержка для них появилась очень быстро, так что теперь они могут помочь облегчить некоторые проблемы с позиционированием, с которыми дизайнеры сталкивались в течение многих лет.

Наконец-то пришло время проникнуть в сетку и исследовать новые возможности дизайна!

Поддержка сетки CSS

Все зависит от браузеров, которые вам нужно поддерживать, но вполне вероятно, что вам не придется беспокоиться о «режиме флага» при использовании CSS Grids. Вы всегда можете посетить документацию Can I Use, чтобы перепроверить, но поддержка CSS Grids значительно увеличилась, и многие дизайнеры могут использовать ее в продакшене, что является поводом для радости!

Основы компоновки CSS Grid

Используя CSS, макеты сетки помогут определить области контента на вашей веб-странице. Существует относительно новый набор свойств, определенных в спецификациях CSS Grid Layout. Это отличный ресурс, на который можно ссылаться, когда вы узнаете больше об этом новом способе дизайна макета. Макеты CSS Grid помогают упростить вещи и упростить создание макетов. Думайте о сетке как о структуре, в которой можно определить измерения.

Части сетки

Линии

В данном случае имеется пять вертикальных и три горизонтальных линии. Строкам присваиваются номера, начиная с единицы. В этом примере вертикальные линии показаны слева направо, но это зависит от направления письма. Поскольку это показывает чтение слева направо, если это справа налево, все будет наоборот. Строкам можно давать имена (необязательно), что помогает ссылаться на них в CSS.

Треки

Трек — это пространство между двумя параллельными линиями. На схеме четыре вертикальных и две горизонтальных дорожки. Существует большое двойное усилие между линиями и дорожками. Линии — отличный способ указать, где контент начинается и заканчивается. Треки — это то, куда на самом деле идет контент.

Клетки

Ячейки находятся там, где встречаются горизонтальная и вертикальная дорожки. На схеме восемь ячеек.

Области

Ячейки вступают в игру при указании областей. Область представляет собой прямоугольную форму, которая может охватывать несколько ячеек. Как и линии, области могут быть произвольно названы. На диаграмме есть несколько меток: «A», «B» и «C».

Создание макета сетки

Может быть полезно сделать набросок перед началом макета. Нет никакой замены старой доброй миллиметровке.

HTML для сетки

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Контейнер очень важен. Внутри контейнера находятся различные блоки контента для веб-сайта. Порядок элементов сетки внутри контейнера не имеет значения. Далее мы будем использовать CSS, чтобы разместить их в нашем макете.

CSS-стили

После того, как вы закончите с HTML-разметкой, самое важное объявление будет сделано в CSS. Внутри контейнера вам нужно применить display:grid или display:inline-grid . Используйте display:grid , если вам нужна сетка на уровне блоков. Используйте display:inline-grid для сеток встроенного уровня.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Свойства grid-template-columns и grid-template-rows используются для указания ширины строк и столбцов. grid-template-columns были установлены как 1fr и 3fr. Здесь сетка принимает форму с дробными единицами. С этими значениями очевидно, что есть два столбца, и они не имеют одинаковой ширины. Столбец со значением 3fr в три раза шире другого. Это объясняет, почему боковая панель кажется более узкой, чем область содержимого.

Есть адаптивные настройки, которые можно сделать, но использование дробных единиц — отличный первый шаг. Расстояние между областями можно контролировать с помощью grid-column-gamp и grid-row-gap .

Все выглядит довольно жестко, но с еще несколькими спецификациями все обретет форму.

Этот пример начинается с размещения заголовка, но элементы можно размещать в любом удобном для вас порядке. Если вы хотите начать с нижнего колонтитула, это тоже сработает.

Начнем с заголовка, который идет от строки столбца 1 до строки столбца 4 и от строки строки 1 до строки строки 2. CSS будет выглядеть следующим образом:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Вы можете заметить, что боковая панель сплющена, и мы ее не очень хорошо видим. Нам нужно будет сделать небольшую перестановку. В этом макете ссылки на строки для получения размещения помогут с расположением. Линии действуют как ориентиры. Заголовок расположен между строкой в ​​первой строке и строкой во второй строке. Для боковой панели он будет начинаться с третьей строки и заканчиваться на шестой строке. Строка заголовка закончилась на двойке, поэтому она будет размещена прямо под ней. Чтобы просмотреть пример, см. проект на Codepen.

Мы используем grid-column-start , чтобы указать начальную вертикальную линию для элемента. В этом случае он будет установлен на три. grid-column-end указывает конечную вертикальную линию для элемента. В этом случае это свойство будет равно четырем. Таким же образом будут установлены и другие значения строки. Размещение боковой панели есть, она просто закрыта областью контента.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Основное содержание начинается с третьего столбца и заканчивается четвертым. Верхняя часть боковой панели и область контента ровные, поэтому они оба имеют grid-row-start , равный трем. Вам может быть интересно, почему контент и боковая панель намного выше. Установив высоту контейнера, в данном случае 400 пикселей, он теперь выше, чем другие элементы.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Последние две области содержимого — это область дополнительного содержимого и нижний колонтитул.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Конечные и начальные объявления могут быть написаны более эффективно. Вы можете увидеть grid-column-start: 1; и grid-column-end: 3; написано стенографически. Это будет выглядеть как grid-column: 1 / 3; . Эту же идею можно использовать для объявления информации о строке столбца.

Отзывчивые преимущества

Теперь, когда макет создан, он кажется очень «настольным». А как насчет планшетов и мобильных устройств? CSS Grid Layouts хорошо работает с медиа-запросами, поэтому дизайн может адаптироваться к разным размерам экрана. Что действительно здорово, так это то, что вы можете изменять области контента в этих разных контрольных точках медиа-запросов. Как дизайнер это означает, что вы выбираете то, что лучше всего подходит для вашего макета в разных контрольных точках. Например, если вы хотите, чтобы «дополнительный контент» располагался над областью «контента», вы можете указать правильные столбцы и строки.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Начав столбцы с единицы и оканчиваясь на четыре, мы сделали области содержимого полной ширины. Строки сетки размещаются так, что «дополнительный контент» теперь находится над «контентом».

Инструмент браузера для CSS Grid Layout

Когда вы разрабатываете макеты или просматриваете другие веб-сайты, Firefox предлагает отличный инструмент для работы с макетами CSS Grid. Он называется CSS Grid Playground и делает изучение сетки очень интуитивным. Перейдя к инспектору, на вкладке макета есть возможность визуально увидеть, как построена сетка. Этот инструмент облегчит процесс проектирования, чтобы исследовать, как различные свойства сетки влияют на общий макет и дизайн сетки.

CSS Grid Layouts — это новый интересный способ создания веб-макетов. Как видите, создать простой макет страницы довольно легко. Этот простой пример является хорошей основой для создания более сложных макетов. По мере роста популярности эта технология будет иметь преимущество при проектировании для различных устройств и точек останова с возможностью настройки макета.