CSS网格项未并排对齐

dhxwm5r4 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(158)

我有一个包含11个项目的列表，我需要将其分为两个并排的列表，它们垂直前进而不是水平前进，这样我就可以将项目1到5垂直堆叠在左列，项目6到10堆叠在右列。
下面是我的网格和项目的SCSS：

.no-list-grid {
  counter-reset: nolist;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}
.no-list-item {
  padding: 30px;
  background: #eeee;
  grid-column-start: 3;
  grid-column-end: 5;
  &:first-child,
  &:nth-child(2),
  &:nth-child(3),
  &:nth-child(4),
  &:nth-child(5) {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

这里有一个代码待定设置，其中包含一个扩展示例：https://codepen.io/zoladesigners/pen/MWXOPPm
您可以看到网格的每一栏都以正确的长度结束，但它们并未彼此对齐。
如果任何其他信息将是有帮助的，请让我知道，我感谢任何人的解决方案，谢谢！

css

来源：https://stackoverflow.com/questions/74495727/css-grid-items-are-not-aligned-side-by-side

1条答案

按热度按时间

46qrfjad1#

我会将grid-auto-flow改为column，这样它会先按列而不是按行填充，然后它应该全部匹配，而不需要定位每个元素。您需要指定行的总数。CodePen。

.no-list-grid {
  counter-reset: nolist;
  display: grid;
  gap: 30px;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
}

.filler {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}
.no-list-item {
  padding: 30px;
  background: #eeee;
}

.no-list-count {
  counter-increment: nolist;
}

.no-list-item.no-list-count {
  display: flex;
  gap: 1em;
  &:before {
    content: counter(nolist);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid blue;
    font-size: 24px;
    color: teal;
  }
}

然后在列表中的任意位置添加一个带有类填充符的div。

<div class="filler"></div>

赞(0）回复(0）举报 2022-11-19

我来回答

CSS网格项未并排对齐

1条答案

相关问题

热门标签

最新问答