JSFiddle - React, Tailwind, and code Playground

by Getulio Ferreira

HTML

<h2>CSS Grid Layout: Exemplo de Uso</h2>
<p>Neste exemplo, utilizamos a nova unidade presente no CSS Grid Layout, fr que tem como objetivo representar uma fração de espaço dentro do container criado</p>

<div class="container">
	<div class="color-one item">item 1</div>
  <div class="color-two item">item 2</div>
  <div class="color-three item">item 3</div>
  <div class="color-four item">item 4</div>
  <div class="color-five item">item 5</div>
  <div class="color-six item">item 6</div>
</div>

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-columns: 1fr 3fr 2fr;
  grid-template-rows: 150px 400px;
}
/*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: #D7FFF1;
}
.color-two{
  background-color: #8CD790;
}
.color-three{
  background-color: #77AF9C;
}
.color-four{
  background-color: #285943;
}
.color-five{
  background-color: #C5E99B;
}
.color-six{
  background-color: #2EC4B6;
}