Как я могу получить элементы сетки, чтобы динамически соответствовать размеру экрана?

Question

Я сейчас создаю игру и хочу создать разделенный экран из текущей версии у меня есть (которая работает на холсте) и наткнулся на CSS-сетка .

Как заставить сетку автоматически изменять размеры элементов внутри нее, чтобы она в равной степени соответствовала размеру текущей viewport / page?

• Если есть только один, то это должен быть размер страницы
• если их два, то он должен быть вдвое меньше ширины и располагаться рядом
• третий должен начинаться со второго ряда и иметь половину высоты и ширину
• четыре должны быть 1/4 вокруг.

затем тренд продолжается для остальных.

Если вы знакомы с играми с разделенным экраном, вы, возможно, знаете схему, о которой я говорю.

Код ниже отлично работает с 4 экранами; Я не знаю, как этого добиться с помощью 1-2-3 ...- 5-6-7 и т. Д.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

.wrapper canvas {
  width: 100%;
}

<div id="wrapper" class="wrapper">
  <canvas id="canvas" width="3840" height="2160"></canvas>
</div>

Вместо этого на вопрос был получен ответ с помощью flexbox, однако было бы неплохо увидеть, как сетка также выполняет эту задачу.

Answer 1

Вы можете сделать это легко с помощью Flexbox :

body {display: flex; flex-wrap: wrap}

.flex {
  display: flex; /* displays flex-items (children) inline */
  flex-wrap: wrap; /* enables them to wrap (default: nowrap) */
  /* 16:9 ratio */
  width: 160px;
  height: 90px;
  margin: 5px;
}

.flex > div {
  flex-grow: 1; /* enabled (default: 0); can grow/expand beyond 50% of the parent's width */
  flex-basis: 50%; /* initial width set to 50% because none of the items will be less than that, no matter how many of them */
  border: 1px solid; /* just to see the result better */
  box-sizing: border-box; /* recommended because of the border; otherwise you'd need to use the CSS calc() function: "flex-basis: calc(50% - 2px);" -2px because of the left and right border, which is 1px each; same applies for margins, if you're going to use them, then you also need to use the calc(), e.g.: calc(x% - twice the defined margin) */
  background: #eff0f1;
}

<div class="flex">
  <div>1</div>
</div>

<div class="flex">
  <div>1</div>
  <div>2</div>
</div>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>