CSS Grid breakline

Question

Я пытаюсь реализовать шаблон сетки CSS, который должен вести себя следующим образом:

На рабочем столе это должно выглядеть так

Для планшета

и мобильный

Я реализовал с использованием Grid и шаблонов, но у меня проблема с планшетом. Требование состоит в том, что если содержимое в B не помещается, скажем, в 50% пространства, тогда должна быть строка разрыва , так что B займет 100% пространства, а C будет вытолкнут в 3-й ряд (так же, как в мобильном)

Я не уверен, возможно ли это с сеткой. Я пытался использовать свойства auto-fit и auto-fill, но ничего не получалось.

Надеюсь, вы можете помочь мне

Answer 1

CSS-сетка + медиа-запросы могут выполнять эту работу:

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

.container div {
  border: 1px solid red;
}

.a {
  grid-column-start: 1;
  grid-column-end: 2;
}

.b {
  grid-column-start: 1;
  grid-column-end: 2;
}

.c {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

@media only screen and (max-width: 700px) {
  .a {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .c {
    grid-row-start: 2;
  }
}

@media only screen and (max-width: 400px) {
  .container {
    grid-template-columns: 300px;
  }

  .a {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .c {
    grid-column-start: 1;
    grid-row-start: 3;
  }
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>