css сетка - сдвинуть правый столбец влево, когда левый столбец динамический

Question

У меня следующая настройка:

section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 1em;
}

.a {
  background-color: green;
  grid-column: 1/7;
  griw-row: 1;
}

.b {
  background-color: grey;
  grid-column: 7/-1;
  grid-row: 1;
}

.c {
  background-color: blue;
  grid-column: 1/7;
  grid-row: 2;
}

.d {
  background-color: yellow;
  grid-column: 7/-1;
  grid-row: 2;
}

<section>
  <div class="b">
    Content b
  </div>
  <div class="c">
    Content c
  </div>
  <div class="d">
    Content d
  </div>
</section>

Элемент с css class .a является динамическим c и не всегда доступен. Как я могу сдвинуть правый столбец (.b) влево, если столбец .a недоступен?

Примечание : я не могу использовать grid-auto-columns, поскольку IE11 этого не делает поддержите это.

Answer 1

Не определяйте явно позиции столбцов. Просто установите количество столбцов, и автоматическое размещение сделает всю работу за вас:

section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 1em;
  margin: 5px;
}

section > * {
  grid-column: span 6; /* all the items should take 6 columns*/
}

.a {
  background-color: green;
}

.b {
  background-color: grey;
}

.c {
  background-color: blue;
  grid-row: 2;
}

.d {
  background-color: yellow;
  grid-row: 2;
}

<section>
  <div class="b">
    Content b
  </div>
  <div class="c">
    Content c
  </div>
  <div class="d">
    Content d
  </div>
</section>

<section>
  <div class="a">
    Content a
  </div>
  <div class="b">
    Content b
  </div>
  <div class="c">
    Content c
  </div>
  <div class="d">
    Content d
  </div>
</section>