Выравнивание элементов сетки по всей строке / столбцу (например, гибкие элементы)
С гибким контейнером и набором flex-wrap: wrap вы можете выровнять переполненные элементы по центру с помощью justify-content: center.
Есть ли способ добиться такого же поведения для переполненных элементов сетки с помощью сетки CSS?
Я создал перо, показывающее желаемое поведение при изгибе.
.container-flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container-flex .item {
width: 33.33%;
background: green;
border: 1px solid;
}
.container-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container-grid .item {
background: red;
border: 1px solid;
}
* {
box-sizing: border-box;
}<h3>Flex</h3>
<div class = "container-flex">
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
</div>
<h3>Grid</h3>
<div class = "container-grid">
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
</div>Возможный дубликат Центрирование в CSS Grid
@johnny Я не думаю, что это дубликат, этот вопрос касается центрирования текста / элементов внутри ячеек сетки, что сильно отличается от обработки переноса и центрирования самих элементов сетки
Я отозвал это.
Что заставляет вас думать, что Flexbox и Grid могут делать то же самое? Если, то зачем нам и то, и другое, с одним было бы хорошо. Это две совершенно разные вещи, хотя некоторые имеют общие черты, а некоторые нет. И нам нужны оба, поскольку не существует единого решения, которое могло бы справиться со всем.
@LGSon Я знаю, что они разные, но поскольку они оба являются свойствами, основанными на отображении, во многих случаях они могут достичь очень похожих результатов. Я задавался вопросом, не упустил ли я свойство или что-то очевидное, поскольку это больше походило на макет сетки, поскольку мое желаемое поведение было по двум осям, а не только по одной строке или столбцу. Установка процентной ширины в разных точках разрыва и наличие гибкого обтекания мне не кажется, что именно для этого был разработан гибкость.
@JoeHastings Проблема, при которой требуется "использовать процентную ширину в разных точках разрыва", больше связана с самой блочной моделью, чем с проблемой Flexbox. Для некоторых из этих функций в CSS Grid были добавлены функции, которые также могут быть обновлением будущей версии Flexbox v.2.
Ответы 2
Не так, как вы хотите, с гибкостью. Вы должны быть точными с CSS-Grid,
<h3>Grid</h3>
<div class = "container-grid">
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item">item</div>
<div class = "item-mid">item</div>
</div>
.container-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
background: red;
border: 1px solid;
}
.item-mid{
background:purple;
grid-column:2/1;
}
Также посмотрите сюда,
(однако это не упаковка)
Меня удивляет, что сетка не может справиться с этим, это немного раздражает, когда вы не знаете, сколько элементов будет, но вы хотите, чтобы любые переполняющиеся элементы были центрированы (без добавления классов javascript) кажется гибким и процентная ширина - лучший вариант для этого случая
Вы можете использовать гибкость в сетке или создать вложенную сетку. Я думаю, что намерение состоит в том, чтобы использовать для этого flex из-за единой оси и justify-content.
Flex и Grid - это разные животные, поэтому простое поведение flex может не очень хорошо переноситься на сетку.
Гибкий элемент может располагаться по центру контейнера, поскольку гибкий макет работает с гибкие линии. Гибкая линия - это строка или столбец.
Когда гибкий элемент просят центрировать строку / столбец, он имеет доступ к доступному пространству на всей строке от начала до конца.
В макете сетки, однако, строки и столбцы должны иметь дело с чем-то, чего нет у гибких линий: путевые стены (линии сетки a / k / a). Например, в вашем коде три столбца. Эти столбцы делят дорожку на три отдельных участка, а элементы сетки ограничены одним участком.
Следовательно, элемент сетки не может быть автоматически центрирован в строке с использованием свойств выравнивания по ключевым словам (например, justify-content или justify-self), потому что путевые стенки ограничивают движение.
Можно сделать область сетки охватывающей всю строку / столбец, которая затем расчищает путь по всей дорожке, позволяя центрировать элемент сетки по горизонтали (justify-content: center) или по вертикали (align-self: center), но это поведение должно быть явно определено.
Чтобы элемент сетки располагался по центру строки в динамическом макете, в контейнере должен быть только один столбец (т. Е. Без разделителей), или элемент нужно будет явно переместить в центр, используя что-то вроде линейное размещение. В противном случае используйте flexbox.
Под «путевыми стенами» вы просто подразумеваете направляющие решетки или их желоба? Я не припомню, чтобы в спецификации когда-либо использовался этот термин.
@TylerH, я как можно чаще использую простой английский в своих ответах. «Путевые стены» - это именно то, что я вижу. Дело в том, что в flexbox единственное препятствие для выравнивания - это элементы-братья. Но в сетке есть дополнительное препятствие: непроходимые дорожки, пересекающие сетку.
Вот что я получаю за то, что мало читал спецификацию последние 15 месяцев или около того :-)
Таким образом, мы все еще обречены, когда хотим центрировать элементы, но каждая строка должна иметь одинаковую высоту, которая является высотой самого высокого элемента в сетке - поскольку flex может хорошо центрировать, но он делает высоту строки, сетка может делать высоту строки но не могу сделать центрирование
в общем, я бы сказал нет, поскольку сетка предназначена не для этого ... но для конкретного случая мы всегда можем найти обходные пути