0

With CSS grid, I know:

  • how to make all items of same height (example 1 below)
  • how to text items centered vertically (example 2)

But how to make both at the same time: same height for all items (for example 1 fr) and the text is vertically centered?

I have already read How do I specify row heights in CSS Grid layout? and Centering in CSS Grid, but here it seems specific to the align-items: center;.

Note: I would like to avoid mixing grid with flexbox or non-grid solutions like How can I center text (horizontally and vertically) inside a div block?.

See examples:

.grid1 { display: grid; grid-template-rows: repeat(2, 1fr); 
         grid-template-columns: repeat(4, 1fr); grid-gap: 2em;  }
.grid2 { display: grid; grid-template-rows: repeat(2, 1fr); 
         grid-template-columns: repeat(4, 1fr); grid-gap: 2em; align-items: center; }
.item { background-color: yellow; }
<div class="grid1">
<div class="item">
ABCABCABCABCABC
</div>
<div class="item">
DEFDEFDEFDEFDEF
</div>
<div class="item">
GHIGHIGHIGHIGHI
JKLJKLJKLJKLJKL
</div>
</div>
<br><br><br>
<div class="grid2">
<div class="item">
ABCABCABCABCABC
</div>
<div class="item">
DEFDEFDEFDEFDEF
</div>
<div class="item">
GHIGHIGHIGHIGHI
JKLJKLJKLJKLJKL
</div>
</div>
Basj
  • 41,386
  • 99
  • 383
  • 673
  • keep your first configuration and center the content inside the grid itemes using any classic method (flexbox, css grid, etc) – Temani Afif May 30 '22 at 10:08
  • @TemaniAfif I wanted to avoid mixing my grid with Flexbox or CSS margins, do you have an idea? – Basj May 30 '22 at 10:09
  • There is nothing wrong *mixing* CSS features. You have 2 different requirements (1) make equal height [done] (2) center content inside div [check the duplicates for all the possible ways] – Temani Afif May 30 '22 at 10:10

0 Answers0