Question

我有一个CSS网格布局，它是两列两行：

“标题标题” “左右”

因此标头始终充满100％，左右需要均匀地共享行。

“左”也有可能无法渲染。我想做的是让“行”单独填充整个行。

.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网格有可能吗？

Answer 1

使用网格实际上无法完成，因为在所有方案中都会创建两列。而且有两列，没有CSS方法可以在同级消失时自动将列切换到span 2。那将需要一个脚本。

您可能要考虑使用隐式列而不是显式列。这可能会导致解决方案。在这里看看：

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

否则，请考虑使用flex而不是grid。使用flex的解决方案相对简单，因为没有“ 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>

什么都没有的CSS网格填充空间

1 个答案: