I'm trying to make a grid template like this picture. any idea how to do it? the pic

Also, I don't want rounded borders, I and also no gap between them.

Thanks <3

CodePudding user response：

Easiest way would be CSS-Grid.

As you haven't provided any attemp and proberly lack research efford for such simple task, I will not explain you how the snippet below works but refer you to some resoruces:

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Alternativly you could also use 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>