html - 如何创建 CSS 框布局？

Question

我对 Web 开发很陌生，我想用 CSS 和 HTML 创建它：

我不确定如何做到这一点，因为我只有 13 岁，还在学习。

我尝试过但惨遭失败的方法：

.grey{
  height:300px;
  width:700px;
  background-color: #e5e5e5;
    z-index: 0;
}
.pink{
    height:150px;
  width:100px;
  background-color:#ff8a8a;
  padding-top: 0px;
  padding-right:0px;
  z-index: 1;
}

<div class="grey">   
<div class="pink"> </div>
  </div>

标签： htmlcss

Answer 1

使用 CSS 中内置的 CSS-grid。请参阅代码片段。

.wrapper {
  display: grid;
  grid-template-columns:
  40%
  1fr
  1fr
  ;
  grid-template-rows:
  100px
  100px
  ;
  grid-template-areas:

  "box-1 box-2 box-4"
  "box-1 box-3 box-5"
  ;
  }

.box-1 {
  grid-area: box-1;
  background-color: grey;
}

.box-2 {
  grid-area: box-2;
  background-color: orange;
}

.box-3 {
  grid-area: box-3;
  background-color: lightblue;
}

.box-4 {
  grid-area: box-4;
  background-color: red;
}

.box-5 {
  grid-area: box-5;
  background-color: lightgreen;
}

<div class="wrapper">

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

</div>