7 способов размещения элементов с помощью макета CSS Grid


Содержание материала:

Макет «Святой Грааль» при помощи CSS Gr >Jun 5, 2020
6 minute read

Данный материал является вольным переводом статьи:
Ire Aderinokun The Holy Grail Layout with CSS Grid

Материал вычитывал: Михаил Синяков

Хотя CSS Grid Layout Module пока еще находится в статусе редакторского черновика, но завершение уже близко. Мы можем включить модуль в некоторых браузерах для тестирования и выяснить, какие ошибки реализация имеет на данный момент.

CSS Grid Layout реально сложен, даже больше, чем Flexbox. Он имеет 17 новых свойств и вводит множество новых концепций на всем пути написания CSS. В попытке понять новую спецификацию, я использовала модуль для создания макета «Святой Грааль».

Что такое макет «Святой Грааль»?

Святой Грааль это макет, который состоит из четырех разделов — header, footer, основное содержимое и две боковых колонки, по одной с каждой стороны. Макет так же придерживается следующих правил:

  • «Плавающая» ширина центральной части и фиксированная ширина сайдбаров
  • Центральная часть в разметке должна идти раньше, чем два сайдбара (но после header’а)
  • Все три колонки должны быть одинаковой высоты, вне зависимости от содержимого
  • Футер должен быть всегда прижат к низу, даже если контент не заполняет вьюпорт
  • Макет должен быть отзывчивым, все разделы должны схлопываться в один столбец на маленьких экранах

Сделать такое при помощи обычного CSS без хаков довольно сложно.

Решение с использованием CSS Grid

Вот такое решение я придумала используя CSS Grid. Во-первых, разметка:

И CSS, всего 31 строка!

Разбор

Как я уже упоминала, макет сделанный при помощи CSS Grid может быть очень сложным. Однако для создания этого макета я использовала только 4 из 17 новых свойств.

  • grid-area
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

Мое решение, по созданию макета «Святой Грааль» при помощи CSS Grid можно разбить на пять шагов.

1. Определение сетки

Первое, что мы хотим сделать, это определить области сетки, к которым мы можем обратиться через псевдоним. Делается это при помощи свойства grid-area .

Затем, используя свойство grid-template-areas мы можем расположить элементы на сетке интуитивным и визуальным способом. Свойство grid-template-areas принимает список из строк разделенных пробелами. Каждая строчка представляет собой ряд. В каждой строке, у нас есть список областей сетки разделенных пробелами. Каждая область сетки занимает один столбец. Так что, если мы хотим, чтобы область охватила два столбца мы определяем ее дважды.

В макете «Святой Грааль» у нас есть 3 столбца и 3 ряда. Header и footer занимают 3 колонки, в то время как другие области охватывают по 1 колонке каждый.

С помощью этой разметки мы получим следующий результат.

2. Определение ширины столбцов

Далее, мы хотим определить ширину столбцов. Она определяется при помощи свойства grid-template-columns . Это свойство принимает разделенный пробелами список. Поскольку у нас 3 колонки, то и ширину мы определяем 3 раза.

В макете «Святой Грааль» мы хотим видеть 2 сайдбара по 150 пикселей каждый.

Также мы хотим, чтобы средний столбец занимал оставшуюся часть пространства. Мы можем сделать это при помощи новой единицы измерения fr . Она обозначает долю свободного пространства в сетке. В нашем случае добавляется еще и ширина сайдбаров, в сумме 300px.

Сейчас наш макет выглядит следующим образом.

3. Определение высоты рядов

Теперь нам нужно определить высоту рядов. Подобно тому, как мы определяем ширину столбцов при помощи grid-template-columns , мы определяем высоту при помощи grid-template-rows . Это свойство принимает разделенный пробелами список содержащий высоту для каждого ряда в нашей сетке. Хотя мы можем записать его на одной строке, я думаю, лучше и визуально более понятно, будет написать по одному ряду в строку.

Таким образом, высота header будет равняться 100px, высота footer 30, а средний ряд (основное содержимое и две боковые панели) займет оставшуюся свободную часть.

4. Прижатый footer

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

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

5. Делаем макет отзывчивым

И, наконец, мы хотим сделать макет отзывчивым. На небольших устройствах все элементы сетки должны отображаться в одном столбце, один за другим. Для этого нам необходимо переопределить 3 свойства, которые мы определили ранее grid-template-areas , grid-template-columns и grid-template-rows .

Во-первых, мы хотим чтобы все элементы в сетке были в одном столбце в определенном порядке.

Далее, мы хотим чтобы все элементы растянулись на всю ширину сетки.

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

Вот и все! Вы можете посмотреть демо по этой ссылке, а так же исходники.

Как создать адаптивный макет CSS Grid. Grid Design или вёрстка с Сеткой. Распределение элементов по ширине

Когда-то давно я писал про необычный сервис , представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. в этом плане поэффективнее будут.

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — CSS Grid! Пост состоит из нескольких частей:

Данный подход в построении макетов позволяет легко создавать достаточно гибкие сетки сайтов с помощью CSS. В будущем он, наверняка, будет использоваться повсеместно. Если я правильно понимаю, отлично подойдет для тех же задач, что и Flexbox, но в отличии от него может одновременно работать в двумерных измерениях (столбцах и строках). Ниже предлагаю перевод статьи , что является неким вступлением в тему и содержит простые познавательные примеры. Внимание! Автор заметки проводит в декабре бесплатный(!) курс по CSS Grid, если хотите, отправляйте запрос на его Email.

Также на просторах интернета нашел полезное видео по теме. Возможно, кому-то проще воспринимать информацию так:

Введение в CSS Grid

В текущем году эта технология получила встроенную поддержку в Chrome, FF, Safari, поэтому вполне вероятно, в недалеком будущем станет популярными инструментом. Но пока что нужно не забывать позаботиться об устаревших и отстающих веб-браузерах.

Самая простая сетка

Здесь 2 основных объекта:

  • родительский / wrapper (оборачивающий все внутренние, составляющие его блоки);
  • дочерние / items (сами элементы).

Вот простейшая конструкция:

Однако сразу после этого ничего особо не поменяется, так как не определен формат отображения. Вы увидите 6 DIV’ов идущих друг после друга.

Колонки и строки

Чтобы сделать вашу сетку двумерной нужно указать параметры строк и колонок — используем опции grid-template-row и grid-template-colum соответственно:

.wrapper

Поскольку для колонок имеется три значения, то их будет генерироваться такое же число, следовательно, рядков — только 2. Цифры в пикселях задают в первом случае ширину элементов (по 100px), во втором — высоту (50px).

Вот еще один пример, который поможет лучше понять принцип работы:

.wrapper

Отобразится следующая картинка:

Расположение и размеры

С этой функцией вы получите реально очень мощные возможности по созданию сеток сайтов. Допустим, у нас имеется размер 3х3:

.wrapper

Если в HTML коде, как в нашем примере, 6 DIV элементов (см. в самом начале), то в данном случае на сайте отобразится только 2 ряда, третий временно не будет заполнен. Однако, когда мы начнем применять разные параметры для позиции и размеров блоков — grid-columnand grid-row , ситуация изменится.

Задаем одному из объектов стили:

.item1

Это означает, что DIV c классом item1 начинается с первой линии колонки в сетке и заканчивается на 4-той, то есть заполняет собой весь ряд.

Собственно, теперь некоторые объекты переместились на последнюю строку, которая у нас была прописана заранее (3х3). Существует вариант попроще:

.item1 < grid-column : 1 / 4 ; >
.item1 < grid-column-start : 1 ; grid-column-end : 3 ; >.item3 < grid-row-start : 2 ; grid-row-end : 4 ; >.item4

Он дает нам следующую картинку:

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

Прототипирование и области макета с CSS Grid

Код разметки при этом следующий (HTML):

Если по строкам все, в принципе, понятно, то с колонками нужно прояснить. Здесь в значении gr >

Добавляем grid-template-areas

Опция дает еще больше гибкости и удивительных функций. Возможно, синтаксис и оформление параметра grid-template-areas выглядит немного необычно, но дальше вы поймете почему все именно так:

.container

Это своего рода визуальное представление вашей сетки сайта в CSS. Все символы в данном параметре формируют 3 строки и 12 колонок, определенные строкой выше. Каждая буква отвечает за одну ячейку. Названия в примере соответствуют блокам HTML кода: header (h), menu (m), content (c) и footer (f), но можете использовать любые другие варианты.

Присвоение областей шаблоны и эксперименты

На следующем шаге вы «логически связываете» символы контейнера и элементы DIV:

.header < grid-area : h; >.menu < grid-area : m; >.content < grid-area : c; >.footer

На сайте отобразится макет вида:


А теперь начинается магия. Давайте поменяем местами некоторые буквы в параметре grid-template-areas , например «c» и «m» местами:

grid-template-areas : «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f» ;

grid-template-areas: «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f»;

Сетка будет выглядеть по другому:

Добавление адаптивности в эту конструкцию вообще выглядит потрясающе. С помощью одного HTML вы бы такое не реализовали, а вот в CSS все возможно.: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .» ;

grid-template-areas: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .»;

На сайте выглядит так:

Никаких скриптов и HTML — только магия CSS Grid!

Дополнительные примеры Grid и Flex

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

Классический макет сайта

У нас имеется шапка и футер, растянутые на всю ширину, а между ними — блок контента с двумя сайдбарами. В первом случае при уменьшении экрана все объекты останутся в тех же позициях, что и раньше.

Если нужно чтобы блоки располагались один под другим, то:

2х колоночная сетка блога

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

Второй прием — дает их расположение один за другим.

Распределение элементов по ширине

Визуально пример напоминает галерею, когда все картинки идут друг рядом с другом в нескольких колонках. При уменьшении размера в каждой строке их будет отображаться все меньше и меньше.

Картинка внутри статьи

Здесь контент разделен на 2 части, а между ними расположен полноэкранный блок.

Итого. В общем, открыл для себя понятие CSS Grid, которое, честно говоря, приятно впечатлило — особенно рам где рассматривались области макета с разными буквами. Безусловно, это все лишь азы «технологии», плюс я не расписывал детально каждый параметр кода. В последнем разделе статьи примеры более комплексные, их следует внимательно просмотреть. Там комбинируется и Flex, и Grid. Если данная тема интересна, подписывайтесь на курсы первого автора — Email записи в оригинальной первой-второй заметке.

Есть что добавить по CSS Grid? — пишите мысли, советы или присылайте интересные линки.

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

  • как раньше работали с CSS-разметкой;
  • разницу между устаревшими подходами и современными стандартами;
  • как начать работу с новыми стандартами (Flexbox и Grid);
  • почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Задача

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

Для начала я покажу, как решить эту задачу с помощью устаревших подходов.

Создание дизайна с помощью CSS Gr >

  • Сайтостроение
  • Статьи
  • Верстка сайта
  • Основы CSS

Спецификация CSS Grid сложна для понимания и предлагает несколько новых и довольно сложных концепций. Данную статью следует рассматривать как обзор, а не как всесторонний анализ Grid.

Создание Grid

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

Но сами по себе display :

Определение grid-макета

Вы можете использовать различные единицы измерения, проценты, значения

Мы определили grid с тремя столбцами (каждый шириной 25rem) и двумя строками высотой 10rem. Разметка, которая нам потребуется:

Наши grid-элементы организованы в столбцы и строки, как показано ниже.

Создание сетки с помощью

Давайте изменим значение

В результате второй столбец сетки стал уже, чем первый и третий.

Столбцы и строки сетки не обязательно должны быть одинаковой ширины.

Явный и неявный Grid

В предыдущем разделе мы явно задали, что Gr >явным Grid .

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

Когда количество grid-элементов превысит количество явно определенных ячеек, оставшиеся элементы cформируют неявный Grid.

Теперь у нас есть три строки. Заметьте, что высота третьей строки задается только содержимым и отступом. Она является частью сетки, поскольку данные элементы являются дочерними к gr data-simplebar>

Размер элементов неявного Gr data-simplebar>

Строки неявного Grid расширяются, чтобы заполнить доступную высоту контейнера.

Если мы добавим достаточно элементов, чтобы создать четвертую строку, высота ячеек неявного Gr >30

Высота строк неявного Grid будет равномерна.

В первоначальном примере мы определили только две строки, каждая высотой 10

Определение размера элементов неявного Grid

Можно задать высоту или ширину по умолчанию для элементов неявного Gr data-simplebar>

Теперь высота элементов третьей и последующих строк будет составлять 30

Использование grid-auto-rows для определения высоты элементов сетки

Есть один недостаток при использовании свойств

Содержимое grid-контейнера может переполнять контейнер при значении длины, выраженной в единицах измерения или процентах.

Единственный способ избежать подобного – это использовать функцию minmax (). Добавим ее в наш CSS:

Функцию minmax () позволяет нам определить минимальный и максимальный размер трека (строк и колонок).

В данном случае высота ряда будет составлять не менее 30

Функции minmax () может принимать длину в единицах измерения или процентах. А также одно из ключевых слов

Если ширина gr >70

Единственный способ избежать такой ситуации – использовать единицы гибкости.

Создание Grid с помощью flex

Единица гибкости (fr) показывают браузеру, какую долю или часть оставшегося пространства в gr data-simplebar>

Начало работы с CSS Gr >

  • Переводы, 16 июля 2020 в 21:16
  • Евгений Туренко

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 и показывает, как он может использоваться для создания современных адаптивных макетов.

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

Рабочий пример: мой первый макет, созданный с CSS Grid

В этом примере Тайлер Стика показывает старый способ построения макетов (с помощью float ) и пытается достичь того же результата с помощью Grid.

Особенности CSS Grid, которые заставляют моё сердце биться быстрее

Фронтенд разработчик Уна Кравец рассказывает о трёх функциях Grid, восхищающих её: включение элемента minmax () , использование grid-gap и названные области.

Практическое использование CSS Grid: добавление Grid в существующий проект

Эрик Мейер рассматривает процесс преобразования существующих CSS наработок в Grid без нарушения их работоспособности в браузерах без поддержки Grid.

Grid-огород

Grid Garden — небольшая и забавная браузерная игра, основанная на написании кода для выращивания моркови в огороде. Это замечательный способ для практики и изучения основ CSS.

Цель моей игры не включает в себя охват всех новых аспектов инструмента CSS Grid. Главное предназначение игры — помочь игрокам развить интуицию и признать потенциал инструмента.

Говорит Томас Парк.

Шпаргалка по CSS Grid

Отличная песочница с качественным визуальным оформлением, которая поможет разобраться с терминологией, свойствами и с тем, как Grid работает в браузере.

Заключение

Данные из скриншота с сайта Can I Use выглядят довольно многообещающе, показывая, что большинство современных браузеров готовы к работе с CSS Grid и могут поддерживать его свойства без префиксов:

Однако компания Microsoft снова разочаровала: на данный момент в браузерах IE и Edge присутствует только частичная поддержка Grid через префикс -ms- . Сейчас в Microsoft отправлена заявка на развитие поддержки Grid, и она находится в топе по количеству заявителей.

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

Несмотря на то, что большинство браузеров поддерживает Grid, он работает только в последних версиях этих браузеров (а в некоторых только частично), что составляет только 30–40 % от общего числа используемых браузеров. Если вы не уверены, что подавляющее большинство ваших пользователей имеет последние сборки браузеров с поддержкой Grid, то желательно не экспериментировать с созданием крупномасштабных проектов.

Полное руководство по CSS Grid

CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

Введение

CSS Grid Layout (aka «Grid») — это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid’ы — это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов. Есть две основные вещи, которые вдохновили меня на создание этого руководства. Первое, это замечательная книга от Rachel Andrew’s Get Ready for CSS Grid Layout. Это подробное и понятное введение в CSS Grid’ы, которое является основой для всей этой статьи. Я настоятельно рекомендую купить и прочитать его. Вторая вещь, которая меня вдохновила — это A Complete Guide to Flexbox (Полное руководство по Flexbox) от Chris Coyier’s, которая стала моим основным ресурсом по Flexbox. Она помогла большому количеству людей, о этом свидетельствует тот факт, что это лучший результат в поисковой выдаче при запросе»Flexbox» в Google. Вы увидите много похожего между этой статьей и моей, потому что почему бы не украсть у лучших?

Моя цель в этом руководстве — это возможность представить вам концепции CSS Grid’ов так как они существуют в самой последней версии спецификации. Поэтому я не буду освещать устаревший синтаксис для IE и сделаю всё возможное, чтобы это руководство регулярно обновлялось, по мере изменения спецификации.

Основы и поддержка браузерами

Для того чтобы начать работу, нам нужно определить элемент-контейнер с помощью display: grid, настроить размеры колонок и строк с помощью grid-template-columns и grid-template-rows, а также разместить его дочерние элементы внутри сетки с помощью grid-column и grid-row. Так же как и во Flexbox, порядок элементов в источнике сетки, не имеет значения (прим. переводчика: в HTML разметке). Ваш CSS может размещать их в любом порядке, что собственно упрощает перегруппировку сетки с помощью медиа запросов. Представьте, что вы определяете разметку всей страницы, а затем полностью переставляете её, чтобы разместить элементы под другую ширину экрана всего лишь с помощью нескольких CSS строк кода. CSS Grid — это один из самых мощных CSS модулей, представленных когда-либо. По состоянию на март 2020 года, многие браузеры уже поддерживают CSS Grid, без префиксов: Chrome (включая Android), Firefox, Safari (включая iOS), и Opera. Internet Explorer 10 и 11 поддерживают его но с реализацией более старого синтаксиса. Была анонсирована поддержка в Edge, но её пока нет.

Управление размером изображения в макете CSS Grid

У меня есть CSS сетка с кучей областей и контейнером с фотографиями.

контролировать размер фотографии, чтобы она находилась в пределах сетки

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

У вас есть две разные проблемы здесь.

Я рассмотрю первый, который должен содержать изображение в своем контейнере. У тебя почти было это.

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

Вторая проблема, которая заключается в масштабировании размера контейнера изображения и перетаскивании элементов сетки ниже, когда изображение становится меньше, значительно сложнее.

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

Это проблема динамического определения размера элемента сетки (контейнера изображения). Почему этот элемент сетки изменяет размер по отношению к размеру изображения, если его размер контролируется grid-template-columns и grid-template-rows ?

Кроме того, почему нижний ряд элементов сетки ( tag , album , rotate ) следует за контейнером изображения вверх или вниз? Им придется покинуть свой ряд.

Масштабирование всего контейнера сетки не будет проблемой. Но кажется, что вы хотите масштабировать только один элемент сетки (контейнер изображений). Это сложно. Возможно, вы просматриваете дополнительные контейнеры, значения auto для длины и, возможно, сценарии.

Вот что происходит, если вы присваиваете строкам изображения значение auto : JSFiddle demo

Как создать адаптивный макет CSS Grid. Grid Design или вёрстка с Сеткой. Распределение элементов по ширине

Когда-то давно я писал про необычный сервис , представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. в этом плане поэффективнее будут.

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — CSS Grid! Пост состоит из нескольких частей:

Данный подход в построении макетов позволяет легко создавать достаточно гибкие сетки сайтов с помощью CSS. В будущем он, наверняка, будет использоваться повсеместно. Если я правильно понимаю, отлично подойдет для тех же задач, что и Flexbox, но в отличии от него может одновременно работать в двумерных измерениях (столбцах и строках). Ниже предлагаю перевод статьи , что является неким вступлением в тему и содержит простые познавательные примеры. Внимание! Автор заметки проводит в декабре бесплатный(!) курс по CSS Grid, если хотите, отправляйте запрос на его Email.

Также на просторах интернета нашел полезное видео по теме. Возможно, кому-то проще воспринимать информацию так:

Введение в CSS Grid

В текущем году эта технология получила встроенную поддержку в Chrome, FF, Safari, поэтому вполне вероятно, в недалеком будущем станет популярными инструментом. Но пока что нужно не забывать позаботиться об устаревших и отстающих веб-браузерах.

Самая простая сетка

Здесь 2 основных объекта:

  • родительский / wrapper (оборачивающий все внутренние, составляющие его блоки);
  • дочерние / items (сами элементы).

Вот простейшая конструкция:

Однако сразу после этого ничего особо не поменяется, так как не определен формат отображения. Вы увидите 6 DIV’ов идущих друг после друга.

Колонки и строки

Чтобы сделать вашу сетку двумерной нужно указать параметры строк и колонок — используем опции grid-template-row и grid-template-colum соответственно:

.wrapper

Поскольку для колонок имеется три значения, то их будет генерироваться такое же число, следовательно, рядков — только 2. Цифры в пикселях задают в первом случае ширину элементов (по 100px), во втором — высоту (50px).

Вот еще один пример, который поможет лучше понять принцип работы:

.wrapper

Отобразится следующая картинка:

Расположение и размеры

С этой функцией вы получите реально очень мощные возможности по созданию сеток сайтов. Допустим, у нас имеется размер 3х3:

.wrapper

Если в HTML коде, как в нашем примере, 6 DIV элементов (см. в самом начале), то в данном случае на сайте отобразится только 2 ряда, третий временно не будет заполнен. Однако, когда мы начнем применять разные параметры для позиции и размеров блоков — grid-columnand grid-row , ситуация изменится.

Задаем одному из объектов стили:

.item1

Это означает, что DIV c классом item1 начинается с первой линии колонки в сетке и заканчивается на 4-той, то есть заполняет собой весь ряд.

Собственно, теперь некоторые объекты переместились на последнюю строку, которая у нас была прописана заранее (3х3). Существует вариант попроще:

.item1 < grid-column : 1 / 4 ; >
.item1 < grid-column-start : 1 ; grid-column-end : 3 ; >.item3 < grid-row-start : 2 ; grid-row-end : 4 ; >.item4

Он дает нам следующую картинку:

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

Прототипирование и области макета с CSS Grid

Код разметки при этом следующий (HTML):

Если по строкам все, в принципе, понятно, то с колонками нужно прояснить. Здесь в значении gr >

Добавляем grid-template-areas


Опция дает еще больше гибкости и удивительных функций. Возможно, синтаксис и оформление параметра grid-template-areas выглядит немного необычно, но дальше вы поймете почему все именно так:

.container

Это своего рода визуальное представление вашей сетки сайта в CSS. Все символы в данном параметре формируют 3 строки и 12 колонок, определенные строкой выше. Каждая буква отвечает за одну ячейку. Названия в примере соответствуют блокам HTML кода: header (h), menu (m), content (c) и footer (f), но можете использовать любые другие варианты.

Присвоение областей шаблоны и эксперименты

На следующем шаге вы «логически связываете» символы контейнера и элементы DIV:

.header < grid-area : h; >.menu < grid-area : m; >.content < grid-area : c; >.footer

На сайте отобразится макет вида:

А теперь начинается магия. Давайте поменяем местами некоторые буквы в параметре grid-template-areas , например «c» и «m» местами:

grid-template-areas : «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f» ;

grid-template-areas: «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f»;

Сетка будет выглядеть по другому:

Добавление адаптивности в эту конструкцию вообще выглядит потрясающе. С помощью одного HTML вы бы такое не реализовали, а вот в CSS все возможно.: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .» ;

grid-template-areas: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .»;

На сайте выглядит так:

Никаких скриптов и HTML — только магия CSS Grid!

Дополнительные примеры Grid и Flex

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

Классический макет сайта

У нас имеется шапка и футер, растянутые на всю ширину, а между ними — блок контента с двумя сайдбарами. В первом случае при уменьшении экрана все объекты останутся в тех же позициях, что и раньше.

Если нужно чтобы блоки располагались один под другим, то:

2х колоночная сетка блога

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

Второй прием — дает их расположение один за другим.

Распределение элементов по ширине

Визуально пример напоминает галерею, когда все картинки идут друг рядом с другом в нескольких колонках. При уменьшении размера в каждой строке их будет отображаться все меньше и меньше.

Картинка внутри статьи

Здесь контент разделен на 2 части, а между ними расположен полноэкранный блок.

Итого. В общем, открыл для себя понятие CSS Grid, которое, честно говоря, приятно впечатлило — особенно рам где рассматривались области макета с разными буквами. Безусловно, это все лишь азы «технологии», плюс я не расписывал детально каждый параметр кода. В последнем разделе статьи примеры более комплексные, их следует внимательно просмотреть. Там комбинируется и Flex, и Grid. Если данная тема интересна, подписывайтесь на курсы первого автора — Email записи в оригинальной первой-второй заметке.

Есть что добавить по CSS Grid? — пишите мысли, советы или присылайте интересные линки.

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

  • как раньше работали с CSS-разметкой;
  • разницу между устаревшими подходами и современными стандартами;
  • как начать работу с новыми стандартами (Flexbox и Grid);
  • почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Задача

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

Для начала я покажу, как решить эту задачу с помощью устаревших подходов.

Почему CSS Gr >

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

Эти преимущества становятся особенно выразительными, если вы сравните CSS Grid с самым популярным фреймворком Bootstrap. Вы можете не только создавать макеты, которые раньше были невозможны без JavaScript, но ваш код станет легче поддерживать и понимать.

Давайте посмотрим на три главных причины, почему я думаю, что CSS Grid превосходит Bootstrap.

Разметка станет проще

Замена Bootstrap на CSS Grid сделает HTML более чистым. Хотя это не самое важное преимущество, оно, вероятно, первое, которое вы заметите.

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

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

Bootstrap

Давайте для начала рассмотрим разметку, необходимую для создания этого сайта в Bootstrap.

Тут мне хочется, чтобы вы обратили внимание вот на что:

    Каждая строчка должна быть с отдельным тэгом

Если это адаптивный сайт, тэги выглядят как правило ещё хуже:

CSS Grid

Теперь давайте посмотрим на способ реализации того же в CSS Grid. Вот HTML:

Я мог использовать семантические элементы, но решил придерживаться div, чтобы сравнение с Bootstrap выглядело понятнее.

Можно заметить сразу, что эта разметка проще. Уродливые имена классов и дополнительные тэги div для каждой строчки — в прошлом. Это просто контейнер для сетки и позиции внутри неё.

И в отличие от Bootstrap, эта разметка не станет слишком сложной с ростом сложности макета страницы.

В примере с Bootstrap от вас не требовалось добавлять CSS, в CSS Grid в этом конечно есть необходимость. Если конкретно, вам необходимо добавить это:

Для некоторых это может быть аргументом в пользу Bootstrap: вам не нужно беспокоиться о CSS для создания простой сетки — вы просто строите макет в HTML.

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

Намного больше гибкости

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

Другими словами — изменить макет с такого:

CSS Grid

Делать это с CSS Grid очень просто. Мы добавляем media-запрос и перемешиваем разные блоки как хотим:

Возможность создания макета подобным образом — не заботясь о том, как написан HTML — называется независимостью от порядка в коде (source order independence), и это гигантская победа для разработчиков и дизайнеров.

CSS Grid позволяет превратить HTML в то, чем он должен был быть. В разметку контента, а не визуальность, которая предназначена для CSS.

Bootstrap

Если бы мы захотели сделать то же самое в Bootstrap, нам бы потребовалось менять HTML. Нам нужно было бы поднять тег menu в верхний ряд, в добавок к header, потому что menu во втором ряду в заложниках.

Сделать такое с наличием медиа-запроса — не тривиальная задача. Такое можно провернуть только вместе с HTML и CSS, и вам бы пришлось возиться с JavaScript.

Этот пример показывает огромное преимущество CSS Grid, которое я испытал на себе.

Больше никаких ограничений 12 колонками

Это не самая крупная проблема, но она множество раз выводила из себя. Поскольку Bootstrap grid разделён на 12 колонок, у вас появятся проблемы, если вы захотите макет из пяти. Или семи. Или девяти. Или из числа, которое не двенадцать.

С CSS Grid всё не так. Вы можете сделать свой собственный макет из стольких колонок из скольких хотите. Вот макет из семи колонок.

Это делается установкой значения repeat(7, 1fr) для grid-template-columns , вот так:

Возможно, есть хак-способов сделать подобное в Bootstrap… И я в курсе, что Bootstrap 4 использует Flexbox, который даёт возможность такой гибкости, но он всё ещё никак не выйдет из бета-версии.

Поддержка браузера

Перед тем, как завершить эту статью, естественно, нужно поговорить о поддержке браузеров. На момент написания этой статьи, 75% глобального веб-трафика поддерживает CSS Grid.

Но, перед тем, как вы целиком откажетесь от мысли пользоваться CSS Grid, я советую прислушаться к тому, что говорит Мортен Ранд-Хендриксен об этом. Он утверждает, что CSS Grid — это возможность переосмыслить то, как мы представляем обратную совместимость:

CSS Grid — это модуль разметки, он позволяет нам менять разметку документа без вмешательства в порядок исходного кода. Другими словами CSS Grid — это абсолютно визуальный инструмент, и если его правильно использовать, он не будет влиять на внутренние связи содержимого в документе. Из этого следует простой, но удивительный факт: отсутствие поддержки CSS Grid в старом браузере не должно влиять на восприятие посетителя сайта, оно должно просто менять это восприятие.

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

Заключение


Я хочу поделиться цитатой Джен Симмонс, разработчика Mozilla. Она описывает то же чувство, которое испытал я к CSS Grid, после того как разобрался в нём:

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

7 способов размещения элементов с помощью макета CSS Grid

2693 просмотра

3 ответа

588 Репутация автора

Я создал макет ниже, используя display: grid , я использовал старый padding-top трюк, чтобы получить плавные квадратные div, но мне интересно, есть ли лучший способ сделать это, с помощью CSS Grid или Flexbox. Макет должен выглядеть как есть, а не использовать JS.

Ответы (3)

плюса

74176 Репутация автора

Попробуйте заменить заполнение на

Или еще лучше, примените его ко всем элементам сетки, а не только к первому:

плюса

8954 Репутация автора

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

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

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

Используя это внутри сетки, вы можете избавиться от своего grid-template-rows объявления. В противном случае, если один элемент будет содержать переполнение, он также изменит высоту всех остальных строк сетки.

2 плюса

174972 Репутация автора

Я создал макет ниже, используя display: grid , я использовал старый padding-top трюк, чтобы получить плавные квадратные div, но мне интересно, есть ли лучший способ сделать это, с помощью CSS Grid или Flexbox.

Дело в том, что вам придется искать другой способ сделать это, если только вы не программируете только для Chrome.

В CSS Grid padding-top уловка не удалась в Firefox. В спецификации указана причина:

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

Процентные поля и отступы для элементов сетки могут быть сопоставлены с:

  • их собственная ось (разрешение влево / вправо в зависимости от ширины, разрешение в верхней / нижней части в зависимости от высоты) или,
  • встроенная ось (левый / правый / верхний / нижний проценты разрешаются по ширине).

Пользовательский агент должен выбрать один из этих двух вариантов поведения.

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

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

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

  • vw unit — равно 1% ширины исходного содержащего блока.
  • vh unit — равно 1% высоты исходного содержащего блока.
  • vmin unitравно меньшему из vw или vh .
  • vmax единица — равно большему из vw или vh .

OtherMedia

Информация должна принадлежать людям

Создание Scrapbook-макета на CSS Gr > Posted on 22.10.2020 30.11.-0001 by tms

Составные сетки

Andy Clarke выступил с фантастическим докладом «Вдохновлённый технологией CSS Grid» на конференции State of the Browser, которая была настоящим озарением для таких как я, разработчиков с дизайнерскими корнями. В докладе он рассказывал о способах, с помощью которых идеи из дизайна печатных изданий могут быть применены в вебе для создания поразительных макетов, и как CSS Grid делает это не только возможным, но и гораздо более простым, чем когда-либо раньше. Одним из этих принципов было использование составных сеток.

Большинство из нас, вероятно, знакомы с использования гридов для веб-дизайна и разработки. Практически все макеты сайтов, которые мне поручали разрабатывать, делились на стандартную 12-колоночную (или изредка 24-колоночную) сетку с колонками равной ширины. Пока что всё достаточно предсказуемо.

С другой стороны, составные сетки создаются путём наложения друг на друга двух или более сеток. Сопоставления, например, 5-колоночной сетки, наложенной на 4-колоночную сетку, создают ритмический рисунок и открывают возможности для построения более динамичного макета, чем обычная сетка.

Рис 2 — Мы начинаем с 4-колоночной и 5-колоночной сетки

Рис 3 — Сетки накладываются одна на другую. В результате получаем составную сетку

Это применимо как с психологической, так и с технической точки зрения — мы можем создать самый обычный макет, несмотря на использование составной сетки. Энди написал детальную статью «Inspired Design Decisions: Pressing Matters», в которой более подробно рассказывается о составных сетках. Также доступно его выступление с конференции «State of the Browser».

Генератор составной сетки

Единицы измерения fr позволяют очень легко реализовывать составные сетки в CSS Grid. Мне нравится идея использования составных сеток в веб-дизайне, но я чувствовал, что процесс их вычисления (особенно более сложной сетки) может быть достаточно трудоёмким. Я хотел иметь возможность быстро и удобно создавать составные сетки, поэтому, вдохновлённый докладом Энди, я засучил рукава и создал небольшой инструмент для их создания и визуализации. Введите количество колонок для двух сеток (максимально с 10 колонками для каждой) и генератор объединит их, выдав итоговое значение, которое можно задать свойству grid-template-columns . Например, сетка с четырьмя колонками плюс сетка с пятью колонками выдаст значение 4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr .

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

Создание сетки для макета альбома

Составная сетка идеально подходит для макета альбома, который я хотел бы сделать немного непредсказуемым, но сохраняющим чувства ритма и баланса. После небольшого количества экспериментов с генератором, я остановился на составной сетке 6/5, которая, как мне показалось, давала нужное количество колонок для дальнейших манипуляций. Это даёт мне исходную сетку для работы:

Определение строк сетки

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

Чтобы сохранить чувство вертикального ритма, я решил, что фотографии должны определённым образом перекрывать друг друга. Я присвоил этот размер наложения переменной, чтобы её можно было использовать по всей странице и обновлять, если потребуется (Рис. 4).

Рис 4 — Вертикальное наложение изображений

Каждое изображение также имеет сопроводительный текст. Для этого должно быть достаточно пространства сверху и снизу, чтобы он не накладывался на предыдущую фотографию. Это предусматривает добавление строк сетки выше и ниже подписи, которые будут выступать в роли «‘padding». Теперь каждое изображение должно охватывать как минимум четыре строки сетки — а изображение, которое перекрывается вверху и внизу, должно занимать пять строк.

Рис 5 — строки, выполняющие роль «padding», позволяют поддерживать минимальный интервал между концом текстового блока и началом следующего изображения.

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

Вместо использования фиксированных значений для строк, выполняющих роль наложения или «padding», мы можем сделать эти треки гибкими с помощью функции minmax(). Это обеспечит ситуацию, в которой строчные треки будут иметь минимальный размер, но будут расширяться, если это потребуется для содержимого.

Размещение элементов

Теперь, когда у нас есть скелет сетки, самое время заняться размещением элементов. Понимание и выбор лучшего способа их размещения в сетке любой структуры порой может быть сложным. У нас есть ряд различных вариантов: номера линий, ключевое слово «span», именованные линии или области — и некоторые из них работают лучше других в определенных ситуациях. Но не существует правильного или неправильного варианта и часто всё сводится к тому, чтобы найти метод, наиболее подходящий именно вам.

Пока всё работает как нужно, нет неправильных подходов

Размещение с помощью линий сетки

Я часто начинаю с размещения элементов, используя начальные и конечные значения — обычно номеров первой и последней линии, но если я знаю точное количество дорожек, которые должен охватить элемент, вместо этого я буду использовать ключевое слово «span». Иногда я именую линии сетки для добавления важных ориентиров (например, wrapper-start и wrapper-end ), но редко захожу настолько далеко, чтобы именовать линии сетки или создавать grid-области прямо для каждого элемента в гриде. Стратегия, которая мне очень помогает, заключается в указании отрицательных grid-линий в ситуациях, когда я хочу разместить элемент до конца сетки. Я писал об этом в отдельной статье. Я использую отрицательные grid-линии наиболее часто в колоночной оси, так как в большинстве случаев (для гридов, с которыми я работаю) количество столбцов известно и фиксировано.

Элемент, расположенный через свойство grid-column со значением 1 / -1, охватит все колонки сетки, от первой до последней:

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

Используя смесь положительных/отрицательных grid-линий и значений «span», достаточно просто разместить элементы по оси колонок. Включение grid-инспектора в панели разработчика Firefox очень помогает в этом, так как позволяет нам увидеть номера линий.

Размещение с помощью grid-областей

Если мы посмотрим на сетку. сможем увидеть, что у нас есть достаточно большое количество строк.

Рис 7 — скриншот из Firefox grid-inspector в панели разработчика, показывающий грид-колонки и строки

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

Это было, когда я решил создать именованные grid-области на оси строк. Grid-области создаются двумя способами:

  1. С помощью свойства grid-template-areas , которое позволяет вам эффективно «рисовать» grid-макет как ascii-рисунок
  2. Используя именованные grid-линии, используя -start и -end как суффиксы к именам линий

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

Если мы именуем линии и для оси строк и для оси колонок, мы получаем grid-область (рис 8)

Рис 8 — суффиксы имён строк со -start и -end создают grid-область

Затем можно ссылаться на эту область, когда размещаем элемент с помощью свойства grid-area :

Это делает наш код более кратким и удобочитаемым, чем использование свойств grid-column и grid-row, и перечисление имен строк:

Но в этом случае нам нужна только именованная grid-область на оси строк. Это нормально, так как мы можем просто сослаться на неё с помощью свойства grid-row:

Так как у нас имеется большое количество строк, мне показалось, что гораздо проще записать свойство grid-template-rows по вертикали, чтобы оно отражало структуру страницы:

Теперь добавление имён линий в правильное место становится более простым, так как мы можем визуализировать структуру сетки:

Всё, что осталось — сослаться на имена областей на оси строк, когда размещаются наши grid-элементы:

Итоговый результат (рис. 10) доступен для ознакомления на Codepen

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

Топ-пост этого месяца:  Как работает в Laravel база данных подключение к бд и использование методов insert, select, update

Добавить комментарий