gridd

by Anchit Gupta

HTML

<div class="wrapper">
  <div class="box a">header</div>
  <div class="box-ab">
    <div class="box b">box1</div>
    <div class="box c">box2</div>
  </div>
  <div class="box d">footer</div>  
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  display: grid;
  border: 1px solid;
  padding: 10px;
  grid-template-rows: 50px 150px 50px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  /* grid-template-columns: repeat(3, 1fr); */
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}
.a{
  grid-column: 1/ -1;
}
.d{
  grid-column: 1/ -1;
}
.box-ab{
  display: flex;
  grid-column: 1/ -1;
  justify-content: space-around;
}