我怎样才能在css中制作这个网格？答案

【问题标题】：How can i make this grid in css?我怎样才能在css中制作这个网格？
【发布时间】：2021-11-08 18:06:59
【问题描述】：

我正在尝试制作像这张图片一样的网格模板。知道怎么做吗？ the pic

另外，我不想要圆形边框，我和它们之间也没有间隙。

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

最简单的方法是CSS-Grid。

由于您没有提供任何尝试，并且对于这种简单的任务缺乏研究工作，我不会向您解释下面的 sn-p 是如何工作的，但请您参考一些资源：

Complete Guide to Grid
MDN WebDocs Grid

body {
  display: grid;
  grid-template-columns: 4fr 1fr;
}

div:nth-of-type(1) {
  grid-column: span 2;
}


/* for styling purpose only */

div {
  border: 1px solid black;
  min-height: 40vh;
}

div:nth-of-type(1) {
  min-height: 20vh;
}

<div></div>
<div></div>
<div></div>

您也可以使用Flexox

Complete Guide to Flexbox
MDN WebDocs Flexbox

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

div:nth-of-type(1) {
  width: 100%;
}

div:nth-of-type(2) {
  width: 80%;
}

div:nth-of-type(3) {
  width: 20%;
}


/* for styling purpose only */
div {
  border: 1px solid black;
  min-height: 40vh;
  box-sizing: border-box;
}

div:nth-of-type(1) {
  min-height: 20vh;
}

<div></div>
<div></div>
<div></div>

【讨论】：