在整个行/列中对齐网格项目(就像弹性项目一样) [英] Aligning grid items across the entire row/column (like flex items can)

问题描述

使用弹性容器和flex-wrap: wrap进行设置，您可以使用justify-content: center将溢出的项目与中心对齐.

With a flex container and flex-wrap: wrap set you can align overflowing items to the center using justify-content: center.

是否有一种方法可以使用CSS网格实现相同的行为，以使网格项溢出?

Is there a way to achieve the same behaviour for overflowing grid items using CSS grid?

我已经创建了一支笔，显示了所需的弯曲行为

I've created a pen showing the desired flex behavior

.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>

https://codepen.io/JoeHastings/pen/PeEjjR

推荐答案

Flex和Grid是不同的动物，因此在flex中简单的行为可能无法很好地转换为网格.

Flex and Grid are different animals, so a behavior that's simple in flex may not translate well to grid.

弹性项目可以在容器中居中，因为弹性布局可与 弹性线 一起使用.伸缩线是行或列.

A flex item can center across the container because flex layout works with flex lines. A flex line is a row or column.

当要求弹性项目在行/列中居中时，它可以从头到尾访问整行中的可用空间.

When a flex item is asked to center in a row/column, it has access to the available space on the entire line, from beginning to end.

但是，在网格布局中，行和列必须与柔韧性线所不能比拟的:轨道墙(a/k/a网格线).例如，在您的代码中有三列.这些列将轨道分为三个独立的部分，而网格项则限制在一个部分中.

In grid layout, however, rows and columns have to contend with something that flex lines don't: track walls (a/k/a grid lines). For example, in your code there are three columns. These columns divide the track into three separate sections, and grid items are confined to a section.

因此，使用网格对齐属性(例如justify-content或justify-self)无法将网格项自动居中于行的中心，因为轨道壁会限制移动.

Therefore, a grid item cannot automatically be centered on a row using keyword alignment properties (such as justify-content or justify-self) because the track walls restrict movement.

可以使网格区域跨越整个行/列，然后清除整个轨道的路径，从而允许网格项水平居中(justify-content: center)或垂直居中(align-self: center)，但是必须明确定义此行为.

It is possible to make a grid area span the entire row/column, which then clears the way across the entire track, allowing a grid item to be centered horizontally (justify-content: center) or vertically (align-self: center), but this behavior must be explicitly defined.

要使网格项目在动态布局中跨行居中，容器将仅需要一列(即没有分隔符)，或者需要使用 基于行的展示位置 .否则，请使用flexbox.

For the grid item to be centered across the row in a dynamic layout the container would need to have only one column (i.e., no dividers), or the item would need to be explicitly moved to the center using something like line-based placement. Otherwise, use flexbox.

这篇关于在整个行/列中对齐网格项目(就像弹性项目一样)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！