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

Question

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

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

Answer 1

最简单的方法是 CSS-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>

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

How can i make this grid in css?

html

css

grid

css-grid