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:10px
}
section div{
  background:#401E2A;
  height:50vh;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center
}

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

section div:nth-child(5){
  grid-column:1/3;
  grid-row:2;
  background:#FF77A8
}
section div:nth-child(6){
  grid-column:3;
  grid-row:2/4;
  height:210px;
  background:#BF597E
}
section div:nth-child(11){
  grid-column:4/6;
  grid-row:3;
  background:#FF77A8
}
section div:nth-child(13){
  grid-column:2/4;
  grid-row:4;
  background:#FF77A8
}