Css 网格自动跨度可用 space

Question

我正在尝试创建一个包含 2 个项目的 css 基于网格的布局，第一个项目将跨越 1/3 的宽度，第二个将跨越 2/3 的宽度，但是当宽度变为低于某个阈值，第二个项目将跳到第二行，第一个项目应填充第一行。

.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 可以做到这一点，但它确实需要一些 hard-coded min-widths 或 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 而不是 grids。注意flex-grow能力。查看更多 here 结果你会得到这样的东西 https://codepen.io/anon/pen/eMyoew

Css 网格自动跨度可用 space

Css grids auto span available space

html

css

flexbox

css-grid