Question

我的目标是使用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一样？

Answer 1

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

更好的解决方案是使用CSS multi-column布局，作为下面的代码段。

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

1 4
2 5
3 6

而不是：

1 2 
3 4
5 6

＆＃13;

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;
}

＆＃13;

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

＆＃13;

Answer 2

您必须为此放弃沟渠区域，并使用grid-column-start。否则，所有内容都会放入同一区域。 https://jsbin.com/peqiwodoba/edit?html,css,output

div:nth-child(odd) {
}

div:nth-child(even) {
  grid-column-start: 2;
}

CSS网格：如何将相同网格区域中的元素排成一行？

2 个答案: