CSS GRID - Text align mid but keep grid.box size

HTML-CSS
1

Hello i’m trying to create a css grid box with boxes inside. But I either can get the boxes to be the correct size but can’t center the text or get the text centered but can’t get the expected result from the box sizes.

this example shows the text in the center but with a gap in between the boxes.

https://jsfiddle.net/xfasrvc1/

this example gives me the correct box size but I have to let go of the centered text.

https://jsfiddle.net/9m6pqny7/16/

Any help or explanation to combine the both of these would be kindly appreciated.

2

text-align:center; on the .box rule centered the text for me. on the second link.

3

It horizontally centers the text but not vertically in there own box. Or is that not possible?

4

You’re not using CSS Grid properly. There are lots of mistakes in your code, that’s why it doesn’t work.

I could go into details but that’d be a long list.

Here is an updated example that does what you want: https://jsfiddle.net/Gigusek/t5Ldr0n8/

In the meanwhile, try this free full course for CSS Grid: https://cssgrid.io/

5

Hi I followed the course!
And in my new approach the centering just happens on a horizontal way. not in a vertical way too.

Edit fiddle - JSFiddle - Code Playground

6

Nice, much better :slight_smile:

As for centering things vertically, there is a separate property called align-[items, content or self]. If you apply align-items: center on the container it’ll do the job but unfortunately your items will be shrinked to take only as much height as they need, meaning you’ll lose background. You can try that and see how it looks.

What you can instead do is apply display: grid to the container’s children and then center align them, it’ll do the job.

Like this:

.dag * {
  display: grid;
  align-items: center;
}

Flex also works if you prefer that.

Now, I’ve noticed that you’re trying to explicitly position many of the items using grid-column and grid-row, there are much easier ways to do things, using grid-template-[columns or rows]. Here is a quick example of a layout made this way.

You can check out these 3 different properties for CSS Grid, using them makes life A LOT easier.