I´m practicing CSS Grid and I´m trying to create a webpage with a sidebar, but my intro and my sidebar are in the place where I only want my sidebar. I´m using grid-template-areas and I feel like I´m using it correctly (but obviously not).
Can you look it over and tell me where my mistakes are?
Thank you
The code is on my CodePen. The link is below:
The sidebar element is inside the intro element. It has to be a direct child of the grid container (the body in this case).
You have to place all the items using grid-area, for example, the nav has to be told to take up both columns by being placed in the nav template area. Also, if you want to center the nav you have to use justify-content and remove the default padding and margin on the ul (content is the ul block, and items are the li items).
The grid-column and grid-row shorthand properties are used with grid items it is not used on the grid container.
As always, it is important that your HTML structure is correct for the CSS to get applied correctly. I would change the Codepen theme to one that gives better syntax highlighting.
Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. If there are issues you should see code marked in red. That is the new Syntax Highlighting showing you where the problems are.
Press the down arrow to the right of the code boxes and select the “Analyze” option. Or use a validator tool.
Thank you. This worked. However, I´m facing a new problem now. I´m trying to center an h2 title in my .intro div, but it will not center. I have centered it in the context of .intro and .intro > h2. What am I missing?
The page in question is on my CodePen accessible by the link below:
CodePen
The justify-items property will only work if .intro is a grid container display: grid.
Also, .intro does not have an h2 element inside it, it has an h1