2nd grid

2nd-grid.markdown

2nd grid

A Pen by Daniel on CodePen.

License.

index.html

<div class="wrapper">
  <div class="box social"> Social</div>
  <div class="box home">Home</div>
  <div class="box pics">Pics</div>
  <div class="box about">About Me</div>
  <div class="box d">Specialises</div>
  <div class="box e">
    <div class="talk">T</div>
    <div class="form">F</div>
  </div>
</div>

style.scss

// layout
.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
  height: calc(100vh - 40px);
  padding: 20px;
}

.box {
  font-size: 150%;
  border: 2px solid black;
  text-align: center;
}

.social {
  grid-column: 1;
  grid-row: 2 / 4;
}
.home {
  grid-column: 2 / 4;
  grid-row: 1 / 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pics {
  grid-column: 4 / 6;
  grid-row: 1 / 3;
}
.about {
  grid-column: 4 / 6;
  grid-row: 3 / 5;
}
.d {
  grid-column: 6;
  grid-row: 1 / 4;
}

.e {
  grid-column: 4 / 7;
  grid-row: 5 / 7;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  padding: 10px 10px;
}

.talk {
  border: 2px solid black;
}

.form {
  border: 2px solid black;
}

Product of Grid