代码之家 › 专栏 › 技术社区 › Matt Coady

CSS网格在没有任何内容时填充空间

css-grid css3 css html

Matt Coady · 技术社区 · 6 年前

我有一个两列两行的css网格布局:

“标题” “左-右”

所以标题总是100%满的,左右两边需要平均地共享他们的行。

还有一种可能是“左”不被渲染。我要做的是让“right”在一个人的时候填满整行。

.grid {
  display: grid;
  grid-template: 
          "header header" 
          "left right";
  grid-template-columns: 1fr 1fr;
  margin-bottom: 50px;
}

header {
  grid-area: header;
  background: #0098db;
}

.left-stuff {
  grid-area: left;
  background: #ffadad;
}

.right-stuff {
  grid-area: right;
  background: #73d073;
}

<!-- example with header and two columns -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="left-stuff">I'm the left stuff</div>
  <div class="right-stuff">I'm the right stuff</div>
</div>

<!-- example with header and one column -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="right-stuff">I'm the right stuff</div>
</div>

grid-template-columns: auto 1fr;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr;
grid-template-columns: 50% 50%;

但它们并不满足这两种情况的要求。这在css网格中是可能的吗?

1 回复 | 直到 6 年前

Michael Benjamin William Falcon 6 年前

它实际上不能用grid完成,因为在所有场景中都会创建两列。对于两列,没有CSS方法可以自动将列切换到 span 2

您可能需要考虑使用隐式列而不是显式列。这可能会导致一个解决方案。请看这里:

CSS Grid: How to make a column span full width when a second column is not there?

track walls “划分柔性线。这允许flex项访问整行。

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

header {
  flex: 0 0 100%;  /* consume all space; force siblings to next line */
  background: #0098db;
}

.left-stuff {
  flex: 1;         /* consume all free space; share space with other flex: 1 siblings */
  background: #ffadad;
}

.right-stuff {
  flex: 1;
  background: #73d073;
}

<!-- example with header and two columns -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="left-stuff">I'm the left stuff</div>
  <div class="right-stuff">I'm the right stuff</div>
</div>

<!-- example with header and one column -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="right-stuff">I'm the right stuff</div>
</div>