CSS Grid Help
Hello,
I am having a stupid time trying to get my first grid to look right. When I load my page, all my grid elements are there but they are not in the right position. They are just listed row after row instead of being in an actual grid with a navidation side bar and two additional columns. I have been over my code countless times and can't find my issue. Additionally, when I go to inspect on my website the css code for my container does not appear but I have double checked that my naming is correct. I've added screenshots of all of the grid code, additionally you can see what it's doing at www.pergolaluxe.com. Any help is greatly appreciated!
5 Replies
first it's
grid-area not Grid-area second in you have html elements with class attribute declared twice f.e. class="box-four" class="toja-angled" the latter will get dismissed 🙂
if you want both classes it needs to be class="box-four toja-angled"Thank you for those notes! I cleaned up the code in the spots you mentioned.
It still has not created the effect I am trying with more than one column so if there are any other ideas out there I am grateful for the help
you gotta put your code in a codepen if you want people to help you no one is gonna bother reading screenshots #how-to-ask-good-questions 🙂
do provide the codepen url, brother, That way, it'll be easier for us to understand
It looks like you tried to set the grid area for some elements that are not direct children of the grid container. For example, toja-flat-top-pic is a direct child of box-three. Nested grids can be used, but you did not show that box-three is a grid container, and it also does not have display:contents. However, toja-flat-top-pic has a grid area, columns, and rows set up that will not work even if you fix the capitalization problem of Grid-area, because that element is not a direct child of a grid.