CSS 网格自动跨越可用空间

Andrew 发表于 Dev

安德鲁

我正在尝试创建一个包含 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）实现吗？

保利_D

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。