如何创建具有列跨度和行跨度的网格系统 [关闭]

Question

我希望我的 CSS 网格有 第一个盒子“4 col 2 row” 第二个两个盒子是“1 col 1 row”，然后 第三个框是“1 col 2 row”

This is how i want it to be

现在，当我将第三个框的行跨度从 1 增加到 2 时，它会向左移动，与第二个两个框切换位置

Answer 1

HTML 代码

<div class="grid"</div>
  <div class="box1>1</div>
  <div class="box2>2</div>
  <div class="box3>3</div>

CSS 代码

.grid{
  display:grid;
  width:500px;
  height:500px;
  background-color:beige;
  border:2px solid black;
  grid-template: repeat (3, 1fr) / repeat (3, 1fr);

.box1{
  grid-row: 1 / span 2;
  grid-column: 1 / span 4;

.box2{
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;

.box3{
  grid-row: 3 / span 1;
  grid-column: 3 / span 2;

希望这就是您的要求。