CSS Grids: automatic horizontal centering cells

Asked Jul 28 '21 at 09:28

Active Jul 28 '21 at 09:54

Viewed 30 times

I've a CSS grid with 3 columns based on a 12 columns layout. It could have from 1 single content (1 column 1 row) to many (resulting in a multiple columns multiple rows). The CSS I'm using

.grid {
  display: grid;
  grid-gap: var(--gap-vertical) var(--gap-horizontal);
  grid-template-columns: 1fr 1fr 1fr;
}

doesn't center horizontally che cells, for example, in a case like this:

<div class="grid">
  <div>
    Content 1
  </div>
  <div>
    Content 2
  </div>
</div>

I need the cells to be automatically horizontally centered in any case (from 1 content to many contents on many rows).

Below a case where I've just contents for 2 cells and what I want.

Notice: I have to handle this keeping the CSS Grids (no Flex or other).

edited Jul 28 '21 at 09:54

asked Jul 28 '21 at 09:28

Fred K

13,249
14
78
103

beyond the image example can you post the code with an example ? – Simone Rossaini Jul 28 '21 at 09:30
are you aware that you can simply use `1fr 1fr 1fr`? it the same as using `Xfr Xfr Xfr` for any X value – Temani Afif Jul 28 '21 at 09:34
@SimoneRossaini added code example, very simple thing – Fred K Jul 28 '21 at 09:35
@TemaniAfif yes you're right but that's another thing, it doesn't solve my actual issue – Fred K Jul 28 '21 at 09:35
There's a problem with stackoverflow code snippet that it can't read ``justify-items``. You can use it to centralize your elements. – Amini Jul 28 '21 at 09:52
from the duplicate: https://stackoverflow.com/a/66596006/8620333 – Temani Afif Jul 28 '21 at 09:56
@AmirrezaAmini tried `justify-items: center;` but does nothing – Fred K Jul 28 '21 at 10:02
No it does. ``justify-items`` is for grid and ``justify-content`` for flexbox. – Amini Jul 28 '21 at 11:26

CSS Grids: automatic horizontal centering cells

0 Answers0