CSS3 Grid

css3-grid.markdown

CSS3 Grid

A Pen by Viwe on CodePen.

License.

index.html

<section>
  <div>Normal size</div>
  <div>Normal size</div>
  <div>Double width</div>
  <div>Normal size</div>
  <div>Double Width</div>
  <div>Double Height</div>
  <div>Normal size</div>
  <div>Normal size</div>
  <div>Normal size</div>
  <div>Normal size</div>
  <div>Double Width</div>
  <div>Normal size</div>
  <div>Double Width</div>
  <div>Normal size</div>
  <div>Normal size</div>  
</section>

style.css

section{
  display:grid;
  grid-template-columns:repeat(5fr);
  grid-gap: 0.5em
}
section div{
  background: #fff;
  border: solid 0.2em #000;
  height:50vh;
  color:#000;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center
}

section div:nth-child(3){
  grid-column:3/5;
  grid-row:1;
}

section div:nth-child(5){
  grid-column:1/3;
  grid-row:2;
}
section div:nth-child(6){
  grid-column:3;
  grid-row:2/4;
  height:98.7%;
}
section div:nth-child(11){
  grid-column:4/6;
  grid-row:3;
}
section div:nth-child(13){
  grid-column:2/4;
  grid-row:4;
}