css - 在整个行/列中对齐网格项(如弹性项可以)



css3 flexbox (2)

使用flex容器和 flex-wrap: wrap set,您可以使用 justify-content: center 将溢出的项目对齐到 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>

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

https://ffff65535.com


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

弹性项目可以在容器中心,因为弹性布局与 弹性线一起使用 。 弹性线是行或列。

当要求弹性项目以行/列为中心时,它可以从头到尾访问整行的可用空间。

然而,在网格布局中,网格线必须与柔性线不相交的东西: 跟踪墙壁 。 例如,在您的代码中有三列。 这些列将网格线分成三个单独的部分,网格项限制在一个部分中。

因此,网格项不能使用关键字对齐属性(例如 justify-contentjustify-self )在行的中心,因为分隔列的墙限制了移动。 弹性线上不存在此问题。

对于要在整个行中居中的网格项,容器只需要有一列(即没有分隔线),或者需要使用 基于行的放置 等方式将项明确移动到中心。 否则,请使用flexbox。


不是你想要的方式flex。 你必须精确的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;
    }

另外,看这里,

以CSS网格为中心

(但这不是包装)





css-grid