Сложная сетка css grid

Создание сложных макетов с использованием CSS Grid

Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны следить за новинками.

После прочтения этого руководства вы сможете логически подходить к построению сайтов и писать чистый код, пригодный для будущего, вместо использования хаков. Это руководство не охватывает навыки HTML / CSS в целом, но сосредоточено на том, как структурировать сборку и стили сетки, используемые для ее разработки. Я не рассмотрел стили отката для браузеров, которые не поддерживают сетку, чтобы не отвлекать внимание.

Вы можете следовать руководству, используя этот Codepen.

Проблема

Жизнь фронтенд-разработчика никогда не бывает скучной. В зависимости от процессов на работе, вы можете быть вовлечены в разработку дизайна — или, возможно, вам будут предоставлены мобильные и настольные приложения для сборки. Возможно, вам дадут настольный макет сайта, а остальное вам придется сделать самостоятельно.

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

На то, как вы создаете сайты, также может повлиять то, как вы умеете писать html / css. Если вам повезло, и вы начали создавать веб-сайты после того, как использовались floats и clears, есть большая вероятность, что вы начали применять такую платформу, как Bootstrap.

В агентстве, в котором я работаю, есть соглашение об использовании сетки bootstrap в качестве основы. Она пользуется поддержкой большинства разработчиков, и это означает, что существует стандарт разработки, с которым нужно работать (хотя лично я не фанат Bootstrap) и это хорошо.

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

Закон инструмента

Фреймворки определяют структуру вашего HTML. Оболочки div и вложенные колонки позволяют легко создавать строгие макеты сетки. Однако существует тенденция формирования зависимости от конкретного инструмента, и в этот момент когнитивный уклон, называемый «Законом молотка», может заставить вас попробовать использовать инструмент, который вы знаете, для любой ситуации.

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

Я перестроил раздел страницы, используя чистый минимальный html и css-grid, чтобы показать, как этот болезненный процесс может превратиться во что-то, от чего они могут получать удовольствие, и в конечном итоге все останутся удовлетворенными.

Итак, давайте рассмотрим дизайн и решим, что с ним делать.

Настольное представление

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

Если в первую очередь вам на ум пришел Bootstrap, вы могли бы подумать, что строка и два столбца идеально для этого бы подошли. Итак, давайте посмотрим, как это будет переноситься на мобильные устройства?

Мобильное представление

Сложенные блоки с контентом довольно просто скомпонованы. Одна вещь, которую мы можем видеть, это то, что порядок размещения отличается — это означает, что подход с двумя столбцами не сработает, если мы не сможем вытащить заголовки и расположить их где-нибудь еще… Что делать разработчику!?

Возвращаясь к основам

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

Самое замечательное в CSS Grid заключается в том, что вам не нужно загружать div-оболочки для создания макетов. Фактически, до тех пор, пока подсветка не будет реализована в основных браузерах, большое количество контейнерных элементов будет проблемой, поскольку сетка будет влиять только на ее прямых потомков.

На этой странице у нас есть 2 заголовка, фотография, текст, ссылка и фон с изображением декоративного дерева. С bootstrap вы можете получить что-то вроде этого:

Источник

Как создать сетки на CSS Grid Layout

CSS Grid Layout — это способ разметки, который позволяет создавать на странице простые и сложные двумерные сетки. Вы можете добавить любое количество столбцов или строк и указать, сколько ячеек должен занимать каждый элемент.

Например, с помощью гридов легко создать такой раздел:

Как создать сетку на гридах

Чтобы добавить сетку, нужно в стилях родительского элемента написать display: grid . Далее указывается количество столбцов и строк в сетке, задаются их размеры.

Описать количество и размеры столбцов — grid-template-columns .

Описать количество и размеры строк — grid-template-rows .

Например, так создаётся сетка из двух столбцов шириной 200px и двух строк высотой 150px :

Как задать размеры столбцов и строк

В процентах. Ширина колонки и высота ряда считаются относительно родительского контейнера. Например, grid-template-columns: 50% 50% создаст две одинаковые колонки шириной в половину родительского элемента.

В пикселях. Устанавливает точную ширину столбца или высоту строки — мы так делали в примере с котами: grid-template-columns: 200px 200px .

С помощью ключевого слова auto. Размеры вычисляются автоматически, в зависимости от свободного пространства.

C помощью ключевого слова fr (fraction). Всё пространство в сетке делится на равные доли fr . Например, колонка grid-template-columns: 1fr растянется на всю область родительского контейнера. А если написать grid-template-columns: 1fr 2fr , вы получите две колонки, при этом вторая будет в два раза шире.

Использовать разные значения. Можно смешивать значения, чтобы добиться большей точности или гибкости:

В этом примере мы создаём четыре колонки. У первой фиксированная ширина, последняя занимает 25% пространства, а вторая и третья делят оставшееся пространство на две равные доли.

Как разместить элементы в гриде

По умолчанию все элементы располагаются в гриде слева направо сверху вниз и занимают одну ячейку сетки. Нумерация считается по линиям, как на картинке:

Чтобы расположить элемент в сетке, нужно задать ему координаты. Например, первый кот начинается на линии 1 столбца и линии 1 ряда, а заканчивается на линии 2 столбца и линии 2 ряда. Кот в очках начинается на 3 линии столбца и 1 линии строки, а заканчивается на 4 линии столбца и 2 линии строки.

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

Здесь кот в очках находится между линиями столбцов -1 и -2:

Стили для расположения элементов в сетке: grid-column и grid-row

grid-column-start и grid-column-end указывают, в каком столбце начинается элемент и в каком заканчивается. Например:

grid-row-srart и grid-row-end указывают, какие строки занимает элемент. Здесь всё, как со столбцами:

Для этих свойств есть сокращённые записи: grid-column и grid-row . В них можно сразу прописать, на какой линии начинается и заканчивается элемент — это делается через черту, вот так: grid-row: 1/3.

Свойство grid-area и repeat

Свойствоgrid-area

Писать каждый раз начальные и конечные координаты для столбцов и рядов — долго и не всегда удобно. Но можно сократить запись с помощью свойства grid-area , оно объединяет и заменяет grid-column и grid-row .

Свойство grid-area принимает четыре значения, которые разделяются косой чертой: grid-row-start , grid-column-start , grid-row-end и grid-column-end :

Эта же запись в полном варианте:

Ключевое словоrepeat

Второй способ сократить код — использовать ключевое слово repeat . Оно помогает, когда в grid-template-columns или grid-template-columns нужно создать множество одинаковых колонок или рядов:

С ключевым словом repeat код выглядит так:

В скобках после repeat сначала указывается количество строк или столбцов, а затем через запятую пишется их размер.

Границы и отступы

Границы между элементами задаются с помощью свойства gap . Например, gap: 10px добавит отступы между элементами по бокам и сбоку:

Чтобы задать только боковые отступы, используйте grid-column-gap , а для отступов между рядами — grid-row-gap .

Как изменить порядок элементов

Первый — указать расположение элемента с помощью grid-column , grid-row или grid-area . К примеру, у нас есть такой список:

 
Кот Кекс
 
Кот Барсик
 
Кошка Василиса
 
Кот Борис
 
 

На странице он выглядит так:

Поменяем порядок. Сделаем так, чтобы Кекс стал третьим и перешёл на вторую строку. Разметку не меняем, только стили:

С помощью стилей вы можете указать координаты для каждого элемента и даже наложить один элемент на другой, если это нужно.

Второй способ — использовать свойство order . По умолчанию элементы грида имеют order , равный 0 , но это значение можно менять. Например, вот что произойдёт, если мы добавим «Кексу» order: 1 :

Элемент переместится в конец:

Где отточить навык работы с гридами

«Старт в программировании» — курс для новичков. Он научит вас создавать страницы, в том числе строить сетки на флексах и гридах. Курс основан на тренажёрах и мастер-классах.

Grid Garden — интерактивная игра, которая поможет понять основы CSS Grid Layout. Вам предстоит поливать грядки с морковью и уничтожать сорняки с помощью гридов.

Раздело CSS Grid Layout — страница на официальной документации MDN. Поможет расширить знания о гридах и не только.

Grid by Example — на этом сайте вы найдёте множество примеров использования CSS Grid. Все статьи здесь на английском языке, но их можно перевести через переводчик, встроенный в браузер.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Полное визуальное руководство/шпаргалка по CSS Grid

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.

Архитектура CSS Grid

Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.

Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).

К слову, если вас интересует Флекс, вот соответствующая статья.

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

Обратите внимание: красным цветом отмечены сокращения для свойств:

К концу настоящей статьи у вас будет полное понимание того, как работает каждое из них.

Настройка проекта

Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:

1. Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
2. Создаем файлы index.html и style.css
3. Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

HTML

Создаем 3 контейнера внутри body :

Источник