I´ve been practicing CSS grid for a StyleStage challenge and I tried to convert a page I was using a lot of Flex with to Grid and it turned from a slightly askew page to a total mess. I thought I would organize things better with grid-template-areas but NO. It´s a total mess and I need some help. I thought grid-template-areas and grid-area would be enough to fit things into place but I have misunderstood something because the page is horrible. Any guidance on where I need to look or what my mistakes are would be very helpful. I´m posting a CodePen link to my Grid disaster as well as what my page was before (when it was primarily Flex) if that at all helps diagnose my misunderstanding.
I love CSS Grid as I feel it’s most easiest way to design any complex design in the world.
Think of CSS Grid as jigsaw puzzles, where you need to place HTML rectangular elements at right place.
I suggest go back to drawing board, take the design screenshot; draw rectangles around html elements and just place these at right place using CSS grid technique.
Clarification: I need to provide grid-template-rows/columns if I´m using grid-template-areas.
Is there a general width and height and I can provide the rows and columns to create a smooth page flow? Something that I can adjust when I start my @media quieries? I have been using 1fr or percents…and the past I used px…but none of these were useful. Can someone help me?
Only the direct children of the grid container are grid items. You can’t place nested elements that are not grid items. For example, your nav ul selector is trying to place the ul using grid-area: nav but only the nav element is a grid item of the main grid container.
As for sizing, you can use whatever sizes and units you like but using relative units when possible will require you to write fewer media queries to avoid overflows. I’d also suggest using repeat/minmax auto grids when possible.
Okay. I´m gutting a lot of my code and trying to focus on what I want the page to look like and how to make that happen with grid.
I´m taking it a problem at a time.
My current issue is that I want my nav to be horizontal and below my “intro”. However, the nav is vertical and awkwardly placed in a box on the right side. IDEALLY, the enter page has a single flow, items displayed horizontally and stacked on one another. That´s what I want but the nav item is interrupting this. My “intro” is just above it and spans two items without a problem, but the nav is not doing this.
Why?
I suspect that there´s some item placed that I haven´t noticed that is causing this asymmetry or perhaps my misunderstanding of how auto or 1fr organize the page, but I´m not sure. …
I think you are confusing how flexbox works with how grid works.
When you set an element to be a grid container pretty much nothing happens by default. With flexbox the flex items (child elements of the flexbox container) are by default put side-by-side. That doesn’t happen with grid. If you want columns you have to create them.
Make sure you understand the difference between the container and the items it creates and which properties go where and do what.
You do not need to set grid items to be display: grid for grid item properties to work. As long as the parent container is a grid container the child elements will be grid items and you can use all the grid item properties (like grid-area placement).
As much as possible use the container to do the layout, placement, and sizing of the items. Any adjustment you directly make to items may affect how the container is able to place the items. For example, if you size your columns but then size the items directly as well.