JSFiddle - React, Tailwind, and code Playground

by Getulio Ferreira

HTML

<h2>CSS Grid Layout: Exemplo de Uso</h2>
<p>Este é um dos exemplos que eu considero mais legal, nele podemos atribuir uma classe ao elemento HTML, esse nome de classe normalmente é o mesmo utilizado para definir seu grid-template, isso facilita a atribuição junto ao grid-area. Também além de definir a grid-area podemos ao lado atribuir a dimensão de suas linhas, e separando com / definimos as colunas. Caso queira deixa uma area vazia, isso também é possível com utlizando o "." no lugar do nome de seu grid-template.</p>

<section class="container grid-template-areas-one">
	<div class="item color-one logo">logo</div>
  <div class="item color-two nav">nav</div>
  <div class="item color-three content">content</div>
  <div class="item color-four sidenav">sidenav</div>
  <div class="item color-five advert">advert</div>
  <div class="item color-six footer">footer</div>
</section>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300');
body{
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
}
.container{
  display: grid;
}
.grid-template-areas-one{
  grid-template:
	"logo nav nav" 50px
	"sidenav content advert" 350px
	"sidenav footer footer" 100px
	/ 100px 1fr 100px;
}
.logo{
  grid-area: logo;
}
.nav{
  grid-area: nav;
}
.content{
  grid-area: content;
}
.sidenav {
  grid-area: sidenav;
}
.advert {
	grid-area: advert;
}
.footer {
	grid-area: footer;
}
 /*Utilizando o Flexbox para posicionar os elementos internos*/
 .item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
 h2, p{
  text-align: center;
  margin: 30px 30px;
}
.color-one{
  background-color: #FFBC42;
 }
 .color-two{
   background-color: #D81159;
 }
 .color-three{
   background-color: #8F2D56;
 }
 .color-four{
   background-color: #218380;
 }
 .color-five{
   background-color: #E3E36A;
 }
 .color-six{
   background-color: #C16200;
 }