Grid перенос элементов
Обновлено: 02.07.2024
Подскажите пожалуйста, как реализовать на гриде следующее поведение, бывшее элементарным без грида.
Есть родительский блок с display: grid . Мы не знаем, сколько в нём будет дочерних элементов, сколько столбцов и рядов.
Далее в него добавляются элементы шириной и высотой 100px. Их ширина не тянется, а остаётся 100px. То есть элементы сами заведуют своей шириной. Они располагаются горизонтально друг за другом. При достижении правого края, если элемент не влезает в оставшееся пустое место контентной области родителя, он должен расположиться на новом горизонтальном ряду. Как это было раньше при вёрстке на флоатах.
При этом если родитель меняется по ширине, или если сами элементы изменились по ширине, то элементы должны просто перестроиться, с той же логикой переносов на новые строки.
Например grid-template-columns: repeat( auto-fill, 100px ) весьма хорош, но при этом не выполняется "элементы сами заведуют своей шириной".
Вот диаграмма с ожидаемым поведением:
Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.
Создание «мёртвых зон» для контента
Если грид-элементу, который естественным порядком попал бы в третью колонку (поскольку вторая колонка перед ним занята), явно объявить grid-column-start:2; , то алгоритм постарается найти следующую свободную ячейку во второй колонке на следующих рядах.
Мертвая зона для контента создана при помощи grid-template-columns и grid-column-start
Грид-полоса будет пропускать колонки, пока не найдёт следующую пустую вторую колонку. Это даёт возможность создать «мёртвую зону» внутри грида, где не будет назначено никаких грид-полос с контентом.
Установка минимальных размеров с сохранением гибкости
В этом сценарии нам нужна возможность установить минимальный размер, но чтобы он мог подстраиваться по контенту, этого можно добиться с помощью ключевого слова minmax , которое мы использовали в примере с устаревшим синтаксисом.
Теперь, после знакомства с основами, нужно создать ряды с контентом, можно начать выстраивать более сложные гриды, горизонтальные и вертикальные.
Использование grid-column-start и ключевого слова span для создания сложных гридов. Фото из Unsplash
Свойства грид-элементов
Шкала CSS Grid
Данная шкала показывает, как вычисляются строки и колонки при их объединении. Для этого используется два вида единиц:
На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:
При использовании функции repeat() мы может установить одинаковую ширину/высоту для колонок/строк. Пример с колонками:
Это аналогично следующему:
Небольшая заметка
При использовании единицы измерения fr , доступное пространство делится на равные части.
В данном случае доступное пространство делится на 4 равные части.
grid-columns: start/end
Данное свойство позволяет объединять колонки. Оно является сокращением для:
Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.
Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:
Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.
Каждый класс .box-* по умолчанию имеет такой масштаб (scale):
Это можно переписать с помощью ключевого слова span :
Давайте "присвоим" 8 фракций .box-1 :
Небольшая заметка
Как мы производим вычисления? box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.
Как использовать ключевое слово span
Считается, что использование span делает код более читаемым.
В этом случае нам просто нужно добавить к box-1 8 частей:
Это даст такой же результат.
grid-row: start/end
Данное свойство позволяет объединять строки. Оно является сокращением для:
Теперь сосредоточимся на строках:
Давайте добавим к box-1 9 частей:
Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.
Вот вариант со span :
grid-area
Сначала нам нужно настроить grid-temlate-areas , о чем мы говорили выше. После этого в дочерних классах определяются названия областей, которые используются в родительском классе:
Определяем grid-template-areas в родительском классе:
Затем определяем grid-area в дочерних классах:
justify-self
Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:
align-self
Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:
Погодите-ка
Давайте разберемся с отношениями между родительским и дочерними элементами.
Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .
Необходимый минимум
Поначалу может показаться, что для понимания Grid нужно изучить весь его новый обширный синтаксис, но чтобы сделать первые шаги в гридах, достаточно знать лишь часть. В примерах из этой статьи содержатся различные идеи, которые важны для начального понимания CSS Grid.
Это только цветочки
Мы пережили почти пятнадцать лет безраздельного господства флоатов в раскладках, успели изучить их до мелочей, a CSS Grid — еще совсем новичок, и еще так много предстоит экспериментировать и изучать.
Самый важный шаг на сегодня – просто использовать Grid по максимуму, знакомясь с ним и создавая более продвинутые раскладки. Grid – это практически терра инкогнита веба, и как только мы лучше познаем его возможности и начнём сочетать его с другими фичами, мы сможем создавать более интересные и гибкие раскладки без лишних стилей, и сможем забыть про отдельные фреймворки.
Если стало интересно и появилось желание продолжить знакомство с CSS Grid, поиграйтесь с GridByExample Рэйчел Эндрю, где исследуется каждый аспект CSS Grid в демо-примерах с объяснениями.
Заключение
Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.
VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.
Есть grid-контейнер с 4 элементами. Использую grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)). При уменьшении экрана непомещающийся элемент переносится на новую строку.
Есть какой-то инструмент, как сделать так, чтобы перенос элементов был только парами? или тройками, если у меня 6 элементов? Кроме способа, если объединять элементы в группы.
Есть какой-то инструмент, как сделать так, чтобы перенос элементов был только парами? или тройками, если у меня 6 элементов.
. или четверками, если элементов 8.
А если нечетное количество элементов, то.
CSS Grid — важнейшее событие для веб-раскладки, что случалось в браузерах со времен флексбоксов. Он позволяет избежать всяких магических чисел, хаков и обходных путей, к которым мы привыкли за последние 15 лет. С ним стало намного проще описывать раскладки, что здорово урежет нишу большинства ведущих CSS-фреймворков и позволит писать меньше стилей.
Если не знакомы с CSS Grid и дочитали аж досюда, то это инструмент для раскладки, применяемый к контейнеру, который затем управляет размещением, размерами и выравниванием дочерних элементов.
CSS Grid предоставляет новые мощные возможности — с ними раскладка учитывает горизонтальное и вертикальное пространство одновременно, можно смело изменять раскладку, не затрагивая разметку, и не нужно медиазапросов, чтобы адаптироваться к свободному пространству.
Настройка проекта
Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:
- Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
- Создаем файлы index.html и style.css
- Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его
Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.
Все готово, можно приступать к делу.
Создаем 3 контейнера внутри body :
Шаг 1
Шаг 2
Немного стилизуем body :
Шаг 3
Стилизуем все контейнеры:
Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.
Шаг 4
Добавим небольшой отступ между контейнерами:
Создание негативного пространства с помощью CSS Grid
Одна возможность, которую дают вам гриды – объявить то, где начинаются колонки в грид-элементе с помощью свойства grid-column-start , что позволяет создать негативное пространство внутри грида.
Негативное пространство с использованием grid-template-columns и grid-column-start
Один из способов создать негативное пространство — задать грид-элементу номер колонки больше его собственного порядкового номера, оставив изначально предназначенное ему место пустым и сдвинув элемент по горизонтали в новую колонку.
Перемещение первого элемента с помощью grid-column-start
В примере выше с негативным пространством, разметка состоит из div-а, обёрнутого в другой div.
Грид представлен так:
Чтобы заставить дочерний элемент начинаться в правой колонке, мы говорим ему начинаться в колонке 2.
Примечание: несоответствие в Firefox 52 приводит к некоторым проблемам с вертикальным выравниванием, где единица FR для высоты рядов не растягивается на всю высоту окна браузера, и для решения этой проблемы мы делаем дочерние элементы грид-элементами, и добавляем единственный ряд нужной нам высоты.
Сокращения для свойств CSS Grid
- place-content
- place-items
- place-self
- grid-template
- gap / grid-gap
place-content
Данное свойство является сокращением для:
place-items
Данное свойство является сокращением для:
place-self
Данное свойство является сокращением для:
grid-template
Данное свойство является сокращением для:
- grid-template-rows
- grid-template-columns
gap/grid-gap
Данное свойство является сокращением для:
Создание двухколоночного грида с интервалами
Чтобы увидеть, как CSS Grid определяет колонки, возьмём эту раскладку:
Двухколоночная раскладка с интервалами с использованием grid-template-columns и grid-gap
Этот грид можно создать с помощью grid-template-columns и grid-gap .
Grid-template-columns отвечает за то, как выкладываются колонки грида, оно принимает ряд значений через пробел, определяющих размер каждой колонки; сколько значений указано, столько и будет колонок.
Например, четырёхколоночный грид из колонок шириной по 250px можно описать так:
Ту же самую раскладку можно выразить с помощью удобного ключевого слова repeat.
Определение интервалов
Grid-gap указывает размер интервалов в грид-раскладке, оно может принимать одно или два значения, при указании двух значений вы определяете размеры интервалов и для рядов, и для колонок.
В нашем примере раскладки, разбитой на две колонки можно объявить наш грид так:
К сожалению, интервал добавится к общей ширине контейнера, которая будет рассчитываться как 100vw + 1rem , и раскладка в итоге будет с горизонтальным скроллбаром.
Горизонтальный скроллбар от использования грид-интервала с единицами измерения относительно вьюпорта
Для исправления этого переполнения места нужно немного другое решение. Вводим единицу доли (FR, от англ. fraction).
Единица fr
Единица fr занимает долю доступного места; если бы доступное место составляло 900px, и при этом первому элементу досталась бы одна доля, а второму — две, то первый получил бы 1/3, а второй – 2/3 от этих 900px.
Переделаем наш новый код, заменив единицы вьюпорта на доли:
Выравнивание контента
Для выравнивания контента в нашем примере мы объявляем грид в дочерних элементах и размещаем их на соответствующих полосах с помощью свойств для выравнивания; полоса – это просто собирательное название для грид-колонок и рядов. У гридов, как и у флексбоксов, есть ряд свойств выравнивания – четыре значения – start , center , end и stretch , которые указывают дочерним элементам, где им находиться на отведённой для них полосе. Stretch, в отличие от других, растянет элемент от начала и до конца его полосы.
align-items и justify-content
В нашем примере, чтобы пригнать контент к центру по вертикали и горизонтали, можно применить эти свойства к контейнеру:
Воссоздание двухколоночной раскладки с помощью старых гридов.
Чтобы воспроизвести эту раскладку с помощью старого грида, придётся учитывать много ограничений в реализации. Мало того, что в старом гриде нет grid-gap , так ещё и в каждом грид-элементе нужно объявить, где это будет начинаться, иначе по умолчанию он будет 1, что заставит все дочерние элементы складываться друг под дружку в первой колонке.
В версии для старых гридов придется добавить интервал как отдельную полосу, чтобы обойти проблему отсутствия отдельного свойства для интервалов, а также уметь назначать начальную позицию каждого элемента.
Подход к выравниванию и растягиваиние старого грида на всю высоту
У старого грида есть та же проблема, что у флекбоксов в IE11: установка контейнеру min-height не всегда будет учтена. В гридах обойти эту проблему гораздо легче.
Для этого можно использовать функцию minmax для ряда родительского контейнера, minmax указывает диапазон наибольших и наименьших значений, которые могут быть у ряда или колонки.
В самих дочерних элементах можно создать грид из единственной колонки и единственного ряда по 1fr .
Наконец, поскольку нет возможности выравнивать с помощью родителя как во Flexbox или современном Grid, для этого придётся использовать сами элементы.
Если хотите посодействовать тому, чтобы Microsoft обновил Grid в MS Edge, посетите их страницу на сайте «статус платформы», посвященную обновлению CSS Grid и проголосуйте за неё, чтобы как можно больше повысить ее приоритет.
Итак, мы уже знаем, как создавать колонки, интервалы, как выравнивать содержимое и как можно добиться поддержки старой версии гридов. Давайте поэкспериментируем, как создать с помощью гридов негативное пространство.
Браузерная совместимость
CSS-гриды уже есть в Safari 10.1, Firefox 52, Opera 44 и Chrome 57.
Есть более старая реализация устаревшей спецификации со своими ограничениями, которая доступна в браузерах Microsoft, но мы лишь кратко её коснёмся, чтобы понять некоторые различия между новыми и старыми реализациями, и как обойти их.
Для большинства раскладок нам пригодится следующая проверка возможности, чтобы старые браузеры по-прежнему поддерживали ту раскладку, которую они понимают:
Браузеры, не поддерживающие @supports или гриды, не получат эту фичу.
Чтобы запускать примеры из статьи, вам потребуются браузеры с поддержкой Grid.
Схема CSS Grid
Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:
- родительские (свойства грид-контейнера) и
- дочерние (свойства грид-элементов)
Обратите внимание: красным цветом отмечены сокращения для свойств:
К концу настоящей статьи у вас будет полное понимание того, как работает каждое из них.
Гибкие гриды без медиавыражений
Хотя некоторые из предыдущих примеров могли реагировать на изменения доступного пространства, ни один из них не предназначался специально для этих целей. У грида есть две крайне мощные фичи для управления свободным местом. Эти фичи называются ‘auto-fit’ и ‘auto-fill’ , и используются внутри функции repeat , обычно с функцией minmax , как здесь:
Они заменяют собой числа в repeat, и вычисляют максимально возможное число колонок в контейнере. Основное различие между ними – это то, как они справляются с лишним пространством в строке.
Auto-fill пытается поместить наибольшее количество повторяющихся элементов в колонку, сколько их может уместиться без переполнения. Когда места для добавления другого элемента не хватает, следующий элемент будет размещён на следующей строке, а это место, которое он не смог заполнить, останется пустым.
Пример: После auto-fill могут оставаться пустые места, тогда как auto-fit будет схлопывать пустые места до 0px .
Auto-fit ведёт себя почти как auto-fill , за исключением того, что любая пустая область будет схлопываться и растягивать элементы в этой строке – напоминая поведение флексбоксов, когда по мере уменьшения доступного пространства колонки схлопываются.
Пример с grid-auto-fit
Раскладка, основанная на медиавыражениях, привязана к области просмотра, это не подходит для изолированных модулей – компоненты должны адаптироваться к тому пространству, которое им доступно. Поэтому как это будет выглядеть на практике?
Практический пример grid auto-fit
Планирование раскладки с помощью span
Можно планировать раскладки множественных полос, разбивая раскладку до наименьшей единицы в раскладке грида. В этом примере наименьшая единица выделена:
Наименьший грид-элемент используется для грид-колонок, поэтому можно выстраивать более крупные элементы с помощью span
Выстраивая всё вокруг наименьшей единицы, можно гибко применять классы со span для создания интересных раскладок, а поскольку значения span суммируются, можно объединять ячейки и по рядам, и по колонкам, для создания в гриде иерархии.
Создание рядов
Что, если вы захотите разбить макет на четыре части? Всё, что мы рассмотрели до сих пор про колонки, применимо и к рядам.
Создание грид-раскладки при помощи grid-template-columns и grid-template-rows
Контент переполняет указанные размеры ряда
Мы создали два ряда по 250px, если контент внутри ряда переполнит его, он прорвется через границу своего ряда и начнёт перекрывать контент ряда под ним. Не совсем желаемый результат.
Свойства грид-контейнера
Начнем со свойств родительского элемента.
grid-template-columns
Данное свойство используется для определения количества и ширины колонок. При этом, можно определять как свойства для каждой колонки в отдельности, так и устанавливать ширину всех колонок с помощью функции repeat() .
Добавим строку в style.css :
- значения в пикселях будут точными. Ключевое слово auto означает заполнение элементом всего доступного пространства
- использование единицы fr (фракция) в repeat() означает, что все контейнеры будут иметь одинаковую ширину
grid-template-rows
Данное свойство используется для определения количества и высоты строк. При этом, можно определять как высоту каждой колонки в отдельности, так и устанавливать высоту всех строк с помощью функции repeat() .
Изменим строку в style.css :
grid-template-areas
Данное свойство используется для определения количества пространства, занимаемого ячейкой Грида (grid cell), в терминах колонок и строк, в родительском контейнере.
Это можно считать схемой макета:
Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:
- grid-template-areas : родительское свойство, создающее схему
- grid-area : дочернее свойство, которое использует схему
Создаем схему
Применяем схему
Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.
column-gap
Данное свойство используется для добавления отступа между колонками.
Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .
row-gap
Данное свойство используется для добавления отступов между строками.
Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .
justify-items
Данное свойство используется для позиционирования грид-элементов внутри грид-контейнера вдоль главной оси. Оно принимает 4 возможных значения:
Добавим еще один контейнер в HTML :
И немного изменим CSS :
align-items
Данное свойство используется для позиционирования грид-элементов внутри грид-контейера вдоль поперечной оси. Оно принимает 4 возможных значения:
justify-content
Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль основной оси. Оно принимает 7 возможных значений:
align-content
Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль поперечной оси. Оно принимает 7 возможных значений:
Создание более сложных гридов
Мы можем перейти к созданию более сложных гридов, заставляя грид-элементы занимать несколько полос в гриде. В колонке этого можно добиться с помощью grid-column-start и grid-column-end, или выразить это в этой сокращённой записи:
Недостаток этого подхода в его слабой модульности, из-за чего может понадобиться очень много кода для позиционирования частей контента.
Ключевое слово span более модульное, поскольку его можно разместить в любом месте и позволить гриду его обрабатывать. Это позволит растянуть элемент на несколько полос, отсчитывая их от фактического положения его начала.
Где бы мы ни разместили этот класс в гриде, он заставит этот элемент растянуться на три полосы от его текущего положения.
Архитектура CSS Grid
Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.
Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).
К слову, если вас интересует Флекс, вот соответствующая статья.
Что такое CSS Grid ?
Грид — это макет для сайта (его схема, проект).
Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.
Вот простой пример макета сайта, созданного с помощью Грида.
Компьютер
Телефон
Читайте также: