如何使用col span和row span创建网格系统

Question

我想要我的CSS网格 第一个方框“4 col 2 row” 然后，第二个两个盒子在“1 col 1行”之上 第3个方框是“1 col 2 row”

This is how i want it to be

现在当我将行间距从第3个框的1增加到2时，它会向左移动，用第2个框切换其位置

Answer 1

HTML CODE

<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;

希望这就是你所要求的。