Расширение ячеек в сетке CSS

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 с классом main, иногда у меня нет div с классом right (другими словами, html может выглядеть так

.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>

Мне нравится писать код CSS, который расширяет div.left до полной ширины контейнера div.main, если div.right не существует. Как я могу это сделать?

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>

Answer 2

Это что-то более подходящее для flexbox, но если ваша структура настолько проста c, как вы указали, 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>