如何使用js对象值更新html

Question

这可能不是一个值得推荐的问题，因为我没有提供代码示例，但我试图在下图中复制设计。我正在寻找一个布局的例子，所以我可以直接从它复制HTML和CSS（4个盒子与1个大盒子对齐）任何人都可以指出我正确的方向或我可以看到什么技术？我看过css-grid，但是我很难找到一个类似于我正在寻找的例子？

谢谢！

Answer 1

尝试使用Bootstrap。使用Bootstrap的两列布局可以很容易地开发这种布局。

Answer 2

CSS Grid应该能够做到这一点。快速向下鞭打，您可以明显调整列和行间隙，并在示例中为红色按钮添加100％的行...但这应该是一个很好的起点。

HTML：

<div class="container">

  <div class="Header">
    <div class="TopHeader" style="background-color:red;">
    </div>
    <div class="BottomHeader" style="background-color:blue;">
    </div>
  </div>

  <div class="LeftCol" ">
    <div class="Square1 " style="background-color:orange; "></div>
    <div class="Square2 " style="background-color:green; "></div>
    <div class="Square3 " style="background-color:orange; "></div>
    <div class="Square4 " style="background-color:green; "></div>
  </div>

  <div class="RightCol " style="background-color:yellow; ">
  </div>
</div>

CSS：

.TopHeader {
  grid-area: topheader;
}

.BottomHeader {
  grid-area: bottomheader;
}

.Square1 {
  grid-area: square1;
}

.Square2 {
  grid-area: square2;
}

.Square3 {
  grid-area: square3;
}

.Square4 {
  grid-area: square4;
}

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 250px 800px;
  align-content: space-around;
  grid-template-areas: "header header" "leftcol rightcol";
}

.Header {
  grid-area: header;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
  align-content: space-around;
  grid-template-areas: "topheader" "bottomheader";
}

.LeftCol {
  grid-area: leftcol;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: "square1" "square2" "square3" "square4";
}

.RightCol {
  grid-area: rightcol;
}