我是第一次使用CSS-Grid:

我想要实现的目标是使用3列网格创建一个灵活的盒子系统,我可以在其中简单地添加大小为1、2或3列的盒子;仅使用一堂课

我试图通过执行https://codepen.io/mathil/pen/WXarXB来实现这一点:



.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 12px;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  background: grey;
}

.card-fullspan {
  grid-column: span 3;
}

.card-twothirdspan {
  grid-column: span 2;
}

.card-thirdspan {
  grid-column: span 1;
}

<div class="container">
  <div class="card-fullspan" style="background: red">Fullspan</div>
  <div class="card-twothirdspan" style="background:green">
    twothirdspan
  </div>
  <div class="card-thirdspan" style="background:green">
    thirdspan
  </div>
</div>





我知道我必须将其跨度为4,对于整个跨度来说就是这样:

.card-fullspan {
  grid-column: span 4;
}


但是,这当然不适用于其他两个,因为我将无法结合其他方框得出for的总和。右侧始终会有12px装订线。

我知道可以为每个项目添加一个不同的类或ID,但这不是理想的解决方案。

最佳答案

span关键字计算后续的网格线。

因此,在三列网格中,当您希望某项跨越整个行时,可以指定span: 3而不是span: 4,这会创建一个附加(隐式)列。

您的代码:

.card-fullspan {
   grid-column: span 4;  /* spans across 4 columns */
}


尝试以下方法:

.card-fullspan {
   grid-column: span 3; /* spans across 3 columns */
}


或这个:

.card-fullspan {
   grid-column: 1 / 4; /* spans from grid-column-line 1 to 4 (3 columns) */
}


或这个:

.card-fullspan {
   grid-column: 1 / -1; /* spans from grid-column-line 1 from the start side
                           to grid-column-line: 1 starting from the end side
                           (note: negative integers work only with explicit grids  */
}


所有详细信息在本节的规范中:


https://www.w3.org/TR/css3-grid-layout/#line-placement


revised codepen

关于css - 具有固定跨度的框可填充整个列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47536879/

10-13 23:35