How to change the grid layout to 4x4 with a 1x1 on the right?-CodePudding

I am new to coding and working on making a contact page like this: Picture. I have figured out how to do my grids, but not so it is either 4x4 on one side and 1x1 on the other side like the picture, or if it is a way to modify the grid so I don't need to split it into two separate grids.

Can anyone help?

* {
  box-sizing: border-box; 
}

html {
  width: 100%;
}

body {
  margin: 0;
  font-family: ;
  width: 100%;
  min-height: 100%;
  position: absolute;
  float: left;
}

.grid_container_4 {
  display: grid;
  grid-template-columns: 25% 25%;
  max-width: 1200px;
  margin: 0 auto;
}

.grid_container_4 div {
  width: 100%;
  padding: 20px;
  border-style: solid;
  padding-top: ;
  text-align: left;
}

.grid_container_5 {
  position: relative;
  display: grid;
  grid-template-columns: 50%;
  max-width: 1200px;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
<div >
  <div >
    <i ></i>
    <h2>Testing</h2>

  </div>

  <div >
    <i ></i>
    <h2>Testing</h2>

  </div>

  <div >
    <i ></i>
    <h2>Testing</h2>

  </div>

  <div >
    <i ></i>
    <h2>Testing</h2>
  </div>
</div>

<div >
  <div >
    <iframe </iframe>
  </div>
</div>
  </body>

</html>

CodePudding user response：

You can put them all into the same grid.

One way of doing this is to use grid-template-areas. You can tell the grid to layout like this:

grid-template-areas:
  'A B E E'
  'C D E E'

and then tell each element which area it is to occupy e.g. grid-area: A;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
    }
    
    html {
      width: 100%;
    }
    
    body {
      margin: 0;
      font-family: ;
      width: 100%;
      min-height: 100%;
      position: absolute;
      float: left;
    }
    
    .grid_container {
      display: grid;
      grid-template-areas: 'A B E E' 'C D E E';
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .grid_container div {
      width: 100%;
      padding: 20px;
      border-style: solid;
      padding-top: ;
      text-align: left;
    }
    
    .grid_container div:nth-child(1) {
      grid-area: A;
    }
    
    .grid_container div:nth-child(2) {
      grid-area: B;
    }
    
    .grid_container div:nth-child(3) {
      grid-area: C;
    }
    
    .grid_container div:nth-child(4) {
      grid-area: D;
    }
    
    .grid_container div:nth-child(5) {
      grid-area: E;
    }
  </style>
</head>

<body>
  <div >
    <div >
      <i ></i>
      <h2>Testing</h2>

    </div>

    <div >
      <i ></i>
      <h2>Testing</h2>

    </div>

    <div >
      <i ></i>
      <h2>Testing</h2>

    </div>

    <div >
      <i ></i>
      <h2>Testing</h2>
    </div>

    <div >
      <iframe </iframe>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Grid can be taken. I would go back to the flex system here. Less CSS for the same result. Here is the desired skeleton.

.wrapper {
  display: flex;
}

.left, .right {
  width: 50%
}

.right {
  background-color: #333;  
  color: white;
}
.left {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;  
  background-color: #999;
}

.left-item {
  display: flex; 
  flex-basis: calc(50% - 40px);  
  justify-content: center;
  flex-direction: column;  
}

<div >
  <div >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>

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