Question

我有以下HTML / CSS

.main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}


/* The following is not essential - for decoration purposes only */

.left {
  background-color: green;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

现在，有时，根据类div的{{1}}，有时我没有类main的{{1}}（换句话说，html可能看起来像这样

div

right

我想做的是编写CSS代码，如果.main { display: grid; grid-template-columns: 2fr 1fr; } /* The following is not essential - for decoration purposes only */ .left { background-color: green; } .right { background-color: orange; }不存在，可以将<div class="main"> <div class="left">Left</div> </div>扩展到容器div.left的整个宽度。我该怎么办？

Answer 1

您可以依赖隐式网格的创建：

.main {
  display: grid;
  grid-template-columns: 2fr;
  grid-auto-columns:1fr; /* this will trigger when you add the "right" element */
  grid-auto-flow:column;
  margin:5px;
}


.left {
  background-color: green;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">right</div>
</div>

<div class="main">
  <div class="left">Left</div>
</div>

如果您想左移，它也可以工作：

.main {
  display: grid;
  grid-template-columns: 2fr;
  grid-auto-columns:1fr; /* this will trigger when you add the "left" element */
  grid-auto-flow:column;
  margin:5px;
}


.left {
  background-color: green;
  grid-column-end:1; /* added this */
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">right</div>
</div>

<div class="main">
  <div class="right">right</div>
</div>

Answer 2

这是更适合flexbox的东西，但是如果您的结构像您指示的only-child一样简单，则可以使用。

.main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 1em;
}


/* The following is not essential - for decoration purposes only */

.left {
  background-color: green;
  height: 25vh;
}

.left:only-child {
  grid-column: 1 / -1;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

<div class="main">
  <div class="left">Left</div>
</div>

在CSS网格布局中扩展单元格

2 个答案: