Grid Items not centering

[orclord1]

I am a new coder and I am taking on the challenge of learning how to use grid to format a website.

I have set a grid row to center all the items it contains, but it is not centering the items.

In the example below, my second row container is “grid-main-info”.

To my understanding I should be able to center everything in that area with “justify-items: center”. However, this is not working. I have also tried “justify-content” but that also is not working.

Could someone please take a look at my code and tell me why this is not working.

CodePen Example

[Erik_J]

First I suggest you remove the complete html page you have pasted in the HTML panel.

That’s not how you should use CodePen.

Then put only the html that is between the body tags into the HTML panel.

Then put the css you have between the style tags into the CSS panel.

Eventual Javascript goes into the JS panel.

Codepen then puts it together and run it in the result pane below.

Please edit your codepen accordingly.

[PaulOB]

@orclord1

To my understanding I should be able to center everything in that area with “justify-items: center”.

Your grid items are 100% wide so there is nothing to centre. You want to centre the children of grid-items so the easiest solution would be to set the grid-item also to display:grid and then your centring rules will take effect on the direct children of the grid-item.

e.g.

.grid-item {
           padding: 0;
          display:grid;
        }

Remember the justify-content on the grid container refers to its direct children. Children of grid items are not covered by the justify rules of their grandparent.

Also I don’t really see why you need display:grid on the header and nav as they could just be normal block display and then flex.

Remember grid is not a replacement for the normal positioning of items (although you can use it like that if you want) but its best use is in aligning items in grids and rows. it can of course be used like you are doing but if each grid item is 100% wide then there’s not really much for the grid to do and you will still have to align the grandchildren in some way.

[orclord1]

Thank you PaulOB. I admit I am a little confused about the formatting options when involving flex and grid – grid is especially very foggy in my head but I’m working my way through it.

I’m doing my best to move away from my old habits of using inline-block and floats to align my content