Day 161

Implementing CSS Grid that you designed into a Wordpress page is a serious PAIN!
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

body {
  max-width: 900px;
  margin: 50px auto;
}

h1, h3, p {
  text-align: center;
}

#div2 {
  margin: 0 auto;
  max-width: 100%;
}

section {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 23em;
  grid-gap: 10px;
}

#sdc-pic1 {
  grid-column: 1 / 3;
}

#sdc-pic1 > img {
  width: 100%;
  height: 100%;
}

#sdc-pic2 {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

#sdc-pic2 > img {
  width: 100%;
  height: 100%;
}

#sdc-pic3 {
  grid-column: 1 / 3;
}

#sdc-pic3 > img {
  width: 100%;
  height: 100%;
}

/* #sdc-pic4 {
 
} */

#sdc-pic4 > img {
  width: 100%;
  height: 100%;
}

/* #sdc-pic5 {
 
} */

#sdc-pic5 > img {
  width: 100%;
  height: 100%;
}

#sdc-pic6 {
  grid-column: 3 / 5;
}

#sdc-pic6 > img {
  width: 100%;
  height: 100%;
}