Alinhamento Vertical Por Grid

by Rodrigo Portillo

HTML

<div class="container-pai">
  <p>Sou um elemento filho</p>
</div>

CSS

.container-pai{
  height: 100vh;  
  
  /*alinhando*/
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}


.container-pai p{
  background-color: #ccc;
  box-shadow: 0 0 .5rem lightgrey;
  padding: .5rem 1rem;
  border-radius: .2rem;
  
  /*alinhando*/
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 3;
}