Перенос строк css grid

Как я могу заставить эту 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

От автора: дни таблиц, маркерные хаки, магия позиционирования и неортодоксальные способы обтекания использовались для достижения желаний макета, и они, наконец, позади. Теперь у нас есть выбор, чтобы использовать самый мощный метод макета, который когда-либо приходил в CSS на сегодняшний день; Grid.

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

Принципы работы Grid

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

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

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

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

Терминология

Контейнер Grid: родительский контейнер, в котором вы определили отображение сетки

Элементы сетки: прямые дети из вашего сетчатого контейнера

Grid Gap: используется для разметки столбцов и строк. Подумайте о разрывах, как водосточные желоба.

Grid Cell: пространство между двумя соседними строками и двумя соседними столбцами сетки столбцов. Это единственная «единица» сетки.

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

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

Grid Lines: Это разделительные линии, которые создаются при определении отображения сетки.

Неявные и явные линии сетки

Неявные: визуализируется как пунктирные линии в DevTools и создается браузером без явного определения строк / столбцов. Хорошим примером этого может быть перенос строк в новую строку независимо от определенного явного числа. Если у вас есть только две строки, явно определенные в вашем CSS, но ваш контейнер содержит больше элементов, чем вы ожидали, и они начинают перенос в другую строку … это неявно.

Явные: сплошные линии, видимые в DevTools для строк / столбцов, определенных в вашем CSS. Явные сценарии — это не решения, сделанные браузером; это решения, которые вы принимаете … это явное.

Интервал

Для пространственных рядов и колонок (или водосточные желоба) вы будете использовать свойство grid-gap, хотя это свойство должно в конечном итоге быть заменено на gap. Чтобы обеспечить вашу сетку водостоками (пробел), вы определяете это свойство в родительском контейнере.

Источник