JSFiddle - React, Tailwind, and code Playground

by Getulio Ferreira

HTML

<h2>CSS Grid Layout: Exemplo de Uso</h2>
<p>Neste exemplo, definimos o tamanho das linhas e colunas com uso do grid-template-columns e grid-template-rows, como podemos perceber os valores para cada elemento podem ser definidos muito facilmente, e ainda utilizamos o Flexbox para auxiliar no posicionamento
  dos elementos, nosso HTML ficou bem estruturado e em poucas linhas assim como nosso CSS.</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 1fr;
  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: #FBFFB9;
}

.color-two {
  background-color: #FDD692;
}

.color-three {
  background-color: #FBFFB9;
}

.color-four {
  background-color: #EC7357;
}

.color-five {
  background-color: #754F44;
}

.color-six {
  background-color: #F6B352;
}