Question

我正在尝试使用2个项目创建基于CSS网格的布局，第一个项目将跨越宽度的1/3，第二个项目将跨越宽度的2/3但是当宽度低于某个阈值时第二个项目item将跳转到第二行，第一项应该填充第一行。

.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
}

.span1 {
  background-color:green;
}

.span2 { 
  background-color:red;
  grid-column-end: span 2; 
}

我在这里有一个例子：https://codepen.io/anon/pen/qopvQz

一切正常但我希望第一项（绿色）在第二项（红色）跳到第二行时自动扩展到全宽。截至目前，第一项仅填充第一行的一半。用css网格（或flexbox）可以实现这个吗？

Answer 1

Flexbox可以做到这一点但它需要一些硬编码的最小宽度或flex-shrink设置为0。

.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 1em auto;
}

.flex.narrow {
  width: 250px;
}

.span1 {
  background-color: green;
  flex: 1 0 100px;
  /* min-width: 100px; */
}

.span2 {
  background-color: red;
  flex: 2 0 200px;
   /* min-width: 200px; */
}

<div class="flex">

  <div class="span1">A</div>
  <div class="span2">B</div>

</div>

<div class="flex narrow">

  <div class="span1">A</div>
  <div class="span2">B</div>

</div>

Answer 2

为此目的尝试使用flex而不是网格。注意flex-grow能力。查看更多here 结果你会得到类似https://codepen.io/anon/pen/eMyoew

的内容

Css网格自动跨越可用空间

2 个答案: