Vertical align the content inside a grid cell

Question

I've look into several questions but I couldn't find any solution that works for me.

What I'm trying to do it to vertical align the content inside the cell but the only thing I can achieve is to center it at the top but not vertically.

My grid:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 25vh;
  width: 100%;
  padding-top: 40px;
}

.prova {
  border: 1px solid;
}

.descrizione {
  padding: 10px;
}

.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 0 / 4;
}

.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 2 / 5;
}

.wrapper div:nth-child(6) {
  grid-column: 3;
  grid-row: 4 / 6;
}

.wrapper div:nth-child(4) {
  grid-column: span 2;
}

.wrapper div:last-child {
  grid-column: span 4;
}

.wrapper div:first-child {
  grid-column: span 2;
}

<div class="prova">
  <div class="descrizione">
    Sito: <br> Emanuele Pesa
  </div>
</div>

here's the link to the page: https://civitonia.com/27051195

score 1 · Answer 1 · answered Aug 11 '22 at 12:00

make .prova flex and .descrizione margin auto

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 25vh;
  width: 100%;
  padding-top: 40px;
}

.prova {
  border: 1px solid;
  display:flex;
}

.descrizione {
  padding: 10px;
  margin:auto;
}

.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 0 / 4;
}

.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 2 / 5;
}

.wrapper div:nth-child(6) {
  grid-column: 3;
  grid-row: 4 / 6;
}

.wrapper div:nth-child(4) {
  grid-column: span 2;
}

<div class="prova">
  <div class="descrizione">
    Sito: <br> Emanuele Pesa
  </div>
</div>

Vertical align the content inside a grid cell

1 Answers1