Grid css автоматический перенос блоков

«Алгоритм автоматического размещения» CSS grid-auto-flow

От автора: эта статья является частью серии «CSS Grid Layout». В одном из наших ранних руководств по реализации CSS Grid мы рассмотрели гибкие столбцы и улучшенные зазоры. Мы узнали, что нам не нужно точно указывать, где мы хотим разместить элементы сетки; если мы объявим свойства сетки, Grid поместит наши элементы в соответствии с алгоритмом автоматического размещения. Это делается с помощью CSS Grid auto-flow. В этом руководстве мы рассмотрим, как этот алгоритм работает и как мы можем влиять на это.

Настройка

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

Все начинается с сетки

Ниже приводится демонстрационная сетка, в которой реализованы простые вещи; это контейнер, который мы объявили как display: grid;, он содержит восемнадцать дочерних элементов. Мы объявили, что он должен состоять из пяти столбцов, каждый из которых имеет равную ширину, по крайней мере такое же количество строк и узкий зазор вокруг ячеек в 2 пикселя.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

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

Примечание: Поведение слева направо было бы отменено, если бы мы имели дело с direction: RTL; макетом.

В дело вступает расширение

Сейчас все хорошо и аккуратно, но давайте посмотрим, что произойдет, когда наши элементы не будут такими идеальными. Мы добавим для .item-7 несколько правил, чтобы увеличить его охват на два столбца и две строки:

Как теперь это выглядит?

Неплохо! .item-7 занимает больше места, поэтому .item-8 и .item-9 смещаются дальше. Затем .item-10 смотрит, есть ли свободное место рядом с .item-9, и когда видит, что нет, он перемещается вниз по строке и в левый угол. Остальные элементы продолжают размещаться так же. Но подождите, что будет, если мы сделаем .item-9 также немного больше?

Теперь все становится интересно; .item-9 больше не вписывается в столбец в конце, поэтому он сдвигается на следующую строку. Поскольку в начале строки он не может поместиться так, чтобы не сместить .item-7, поэтому он перемещается дальше. .item-10, также сдвигается и размещается под .item-6, но, если вы помните, он должен найти свободный столбец, и если не находит его смещается на строку вниз и снова начинает с левого угла. Это важная концепция.

Приветствуем grid-auto-flow

Если вы посмотрите на предыдущую демо-версию, то увидите, что .item-18, не найдя места рядом с .item-17, переместился вниз. Мы сами определили только пять строк, но Grid предположил, что нужна еще одна строка. Это связано со значением grid-auto-flow, которое присвоено элементу сетки, а значение по умолчанию для этого свойства — row. Мы можем изменить это значение на column, если захотим, но это полностью изменит нашу сетку:

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

Плотность имеет значение

Мы можем добавить другое ключевое слово в свойство grid-auto-flow, и это, возможно, мое любимое ключевое слово CSS на сегодняшний день: dense. Противоположное ему ключевое слово sparse (мое второе любимое) — это значение по умолчанию. Давайте сделаем следующее:

Источник

Как я могу заставить эту CSS-сетку переноситься на новую строку без указания минимальных размеров?

Я пришел из тяжелого фона div / float для создания отзывчивых сайтов (например, Bootstrap 3, Foundation) и кратко использовал Flex Box, но пытался использовать Grid повсюду, поскольку он действительно отлично справлялся с рядом проблем. Кажется, я слишком часто сталкиваюсь с подобными «простыми» проблемами и чувствую, что упускаю некоторые основы и не могу найти ответ в документации. В любом случае, к коду. Учитывая такую ​​настройку сетки:

display: grid; grid-auto-columns: max-content; grid-auto-flow: column; 

содержимое не переносится в новую строку после того, как оно заполнило ширину своего родительского элемента. В идеале я мог бы иметь автоматическое обертывание без предварительного определения точных размеров пикселей, таких как grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); . Похоже, это не подходит для моих нужд — мне пришлось бы определить несколько grid-template-columns измерений для разных окон просмотра и знать, какая ширина подходит для элементов внутри столбцов. Я бы лучше сказал grid-auto-columns: max-content; , а затем элементы просто переносились на новую строку. Возможно ли это с сеткой? Что я упускаю / недопонимаю? См. Codepen с полным примером, демонстрирующим проблему: https://codepen.io/csdv/pen/OrbrzJ

Думаю, это может вам помочь, у меня был аналогичный вопрос, так как я хотел иметь минимальное количество столбцов, но иметь возможность обернуть их, даже если оставалось место stackoverflow.com/q/53434024/8437694 — person IvanS95 &nbsp schedule 19.12.2018

AFAIK вам всегда нужно каким-то образом быть конкретным с шириной элементов сетки — person IvanS95 &nbsp schedule 19.12.2018

Ответы (2)

Я не понимаю, как это возможно с текущей версией CSS Grid. . Как вы уже обнаружили, вам, по крайней мере, потребуется определить фиксированную минимальную ширину столбцов, чтобы в какой-то момент принудительно выполнить перенос. К сожалению, при автоматическом повторении минимальная длина не может быть только auto , min-content или max-content , потому что это запрещено в спецификации. Насколько я могу судить, вот как можно ближе подойти к Grid:

.btn-tabs < display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, max-content)); width: 20rem; >/* original demo styles */ .btn

 
Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 

.btn-tabs < display: flex; flex-wrap: wrap; width: 20rem; >/* original demo styles */ /* notice no width defined on flex items, but they wrap anyway */ .btn

 
Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 

Красивый. Я могу отказаться от идеи принудительно установить минимальную ширину и позволить остальным автоматически вычислять. Я остановился на том, что делает то, что я ищу — спасибо, Майкл! grid-template-columns: repeat(auto-fit, minmax(10rem, auto)); — person Charlie Schliesser; 19.12.2018

Выглядит неплохо. Да, auto даже лучше, потому что он делает то, что вы хотите, и упрощает понимание кода. — person Michael Benjamin; 19.12.2018

grid-template-columns: 25% 25% 25% 25%; 

grid-template-columns: 25% auto auto auto; 

Источник

CSS Grid: Работа с автоматическим переносом элементов

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

Обычная проблема

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

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

Решение проблемы

Для решения этой проблемы можно использовать свойство grid-template-columns с функцией repeat() . Это позволит задать количество колонок и их ширины, и при изменении размера окна браузера элементы будут переноситься на следующую строку.

В данном случае, repeat(auto-fill, minmax(186px, 1fr)) создает столько колонок шириной в 186px, сколько влезет в ряд. Если ширина окна браузера становится меньше, чем общая ширина колонок, элементы автоматически переносятся на следующую строку.

Заключение

CSS Grid предоставляет гибкие возможности для создания сложных макетов без использования медиазапросов. Используя функцию repeat() в свойстве grid-template-columns , можно добиться автоматического переноса элементов на следующую строку при уменьшении ширины окна браузера.

Источник

Колонки с автоматическим подбором размеров в CSS Grid: auto-fill или auto-fit

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

Все это доступно в всего лишь одной строке CSS – мне это напоминает, как Дамблдор взмахнул своей палочкой дома у Горация и «мебель вернулась на свои места, украшения взмахнули в воздух, подушки набились перьями, рваные книги сами себя отреставрировали и приземлились на полки…».

Такое магическое поведение без подключения адаптивности достигается через функцию repeat() и ключевые слова автоподстановки.

В общем, функция repeat() позволяет повторять колонки сколько угодно раз. Например, если вам нужна 12-ти колоночная сетка, можно написать так:

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

1fr – эта запись говорит браузеру растянуть пространство между колонок равномерно. То есть мы получаем жидкие и равные по ширине колонки. В таком случае сетка всегда будет растягиваться на 12 колонок, несмотря на ширину. Как вы догадались, это нехорошо. На маленьких экранах контент может сильно сжаться.

Поэтому необходимо задать минимальную ширину колонок, чтобы они не стали очень узкими. Для этого нам понадобится функция minmax().

Но тогда в CSS Grid переполнится строка. Колонки не переедут на новые строки, если ширина вьюпорта недостаточна, чтобы вместить все колонки с новой минимальной шириной. Мы же сказали браузеру повторять колонки 12 раз в строке.

Чтобы колонки переносились можно использовать auto-fit или auto-fill.

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

С auto-fit вы можете получит в конце строки пустое пространство. Но когда и как? Давайте узнаем.

Fill или fit? В чем разница?

На недавнем семинаре по CSS я говорил про разницу auto-fill и auto-fit:

«auto-fill ЗАПОЛНЯЕТ строку максимально возможным числом колонок. Если в строку можно вместить новую колонку, она будет создана с четко заданной шириной, потому что это ключевое слово пытается ЗАПОЛНИТЬ строку максимальным числом колонок. Новые колонки могут быть пустыми, но они все же будут занимать место в строке.

auto-fit ПОДСТРАИВАЕТ доступные на данный момент колонки под пространство, расширяя их, чтобы они могли занять все доступное пространство. Браузер сначала заполняет свободное пространство дополнительными колонками (как auto-fill), после чего пустые колонки сжимаются.»

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

Колонки заданы через функцию repeat() и имеют минимальную ширину 100px, максимальная ширина 1fr. Колонки будут равномерно расширяться на любое свободное пространство. Для колонок в строке мы будем использовать ключевые слова автоподстановки, и браузер сам позаботиться об адаптивности сетки и переносе колонок на новые строки при необходимости.

Браузер разместит колонки и задаст им размер в первом примере с помощью auto-fill, после чего будет применен auto-fit.

Источник