9

我的目标是使用 CSS 网格布局进行两列砌体布局。给定一个有子元素的元素：

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

让孩子们将自己交替排列成列。我的想法是有两个网格区域left并right告诉孩子们分成它们：

section {
  display: grid;
  grid-template-areas: "left right";
}

div:nth-child(odd) {
  grid-area: left;
}

div:nth-child(even) {
  grid-area: right;
}

这是一个说明我当前状态的 JSBin：https ://jsbin.com/zaduruv/edit?html,css,output

不幸的是，这些元素的反应与它们设置的完全相同position:absolute。也就是说，它们都挤向顶部并相互重叠。

CSS网格布局属性是否有可能让孩子们在列中排队，就像他们通常做的那样position: static？

4

2 回答 2

2

你不能。由于元素可以在 CSS 网格中相互重叠，因此它甚至不会尝试对齐它们。顾名思义，它是一个网格，而不是列布局。

更好的解决方案是使用CSS 多列布局，如下所示。

多列布局的唯一问题是，它垂直而不是水平分布 div，所以你得到这个：

1 4
2 5
3 6

而不是这个：

1 2
3 4
5 6


section {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    width: 500px;
    background-color: #e0e0e0;
}

div {
  width: 250px;
  display: inline-block;
}

div:nth-child(1) {
  background-color: #c1c0c1;
  height: 100px;
}

div:nth-child(2) {
  background-color: #fedbc1;
  height: 50px;
}

div:nth-child(3) {
  background-color: #dec34a;
  height: 130px;
}

div:nth-child(4) {
  background-color: #ce3294;
  height: 110px;
}

div:nth-child(5) {
  background-color: #99deac;
  height: 80px;
}

div:nth-child(6) {
  background-color: #aade34;
  height: 190px;
}
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

于 2017-03-09T09:03:09.600 回答
0

你必须放弃这个网格区域并使用 grid-column-start。否则所有东西都将放在同一个区域。https://jsbin.com/peqiwodoba/edit?html,css,output

div:nth-child(odd) {
}

div:nth-child(even) {
  grid-column-start: 2;
}
于 2018-07-18T08:25:24.650 回答