То же поведение, но с использованием сетки CSS вместо CSS Flexbox

Question

Я создаю Codepen .Он создает 4 квадратных кнопки, которые, когда размер контейнера становится маленьким, последние две кнопки помещаются в новую строку.

Используются Flexbox и :after.Есть ли способ использовать CSS-сетку вместо Flexbox?

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

.firstChildren {
  flex: 1 1 50%;
  display: flex;
  max-width: 640px; /* max-width = 300px + 4 x 10px margin */
}

.secondChildren {
  flex: 1;
  border: 1px solid black;
  min-width: 50px; /* minimum width */
}

.secondChildren:after { /* create squares */
  content: '';
  display: inline-block;
  vertical-align: top;
  padding-top: 100%;
}

<div class="container">
  <div class="firstChildren">
    <div class="secondChildren"></div>
    <div class="secondChildren"></div>
  </div>
  <div class="firstChildren">
    <div class="secondChildren"></div>
    <div class="secondChildren"></div>
  </div>
</div>

Answer 1

Вы можете настроить свой код, как показано ниже:

.container {
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); /*2 x 50px*/
  border: 1px solid black;
  max-width:1280px; /*2 x 640px */
}

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

.secondChildren {
  border: 1px solid black; 
  padding-top: calc(100% - 2px); /* create squares (remove 2px of border) */
}

<div class="container">
  <div class="firstChildren">
    <div class="secondChildren"></div>
    <div class="secondChildren"></div>
  </div>
  <div class="firstChildren">
    <div class="secondChildren"></div>
    <div class="secondChildren"></div>
  </div>
</div>

Answer 2

Обтекание по 2

Это позволит масштабировать 4 поля (4/1), чтобы соответствовать ширине, и упасть до двух рядов (2/2) при желаемом пороге.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #000;
}

.child {
  border: 1px solid #000;
  padding-top: 100%;
}

@media (max-width: 300px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

---

Обтекание по отдельности

Обтекание будет достигнуто, когда ящики достигнут 100px.Они обернутся индивидуально (как сгиб) , когда будет достигнута желаемая минимальная ширина.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  border: 1px solid #000;
}

.child {
  border: 1px solid #000;
  padding-top: 100%;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>