# Grids don't work **URL:** \ **Category:** Beginners\ **Created:** [March 10, 2022, 10:26pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368 "2022-03-10T22:26:58Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 10, 2022, 10:26pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/1 "2022-03-10T22:26:58Z")
I’ve been trying to fix [BBQ Smokes](http://mcgraphics.us/bbq) menu-grid and bbq-story grids in PG and VSC. I’ve rewatched PG grid tutorials, but am getting nowhere. Both are 3 column area grids. Getting media queries to responsive single columns didn’t work either. Help please. `.menu-grid { background-color: #252525; display: grid; align-items: start; justify-items: center; margin-top: 1rem; padding-top: 1rem; grid-template-rows: auto 1fr 1fr; grid-template-areas: 'gallery1 intro gallery2' 'gallery1 menu gallery2'; }` `.bbq-story { background-color: var(--background); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'two story guy'; justify-content: center; align-content: center; margin-top: 1rem; padding-top: 1rem; margin-bottom: 6px; }` ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 10, 2022, 10:59pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/2 "2022-03-10T22:59:27Z")
Hi @kat, What isn’t working? It is a little hard to troubleshoot from a small snippet of CSS. I can see the grid areas showing up in the order you list. Cheers, Bob ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 11, 2022, 3:38pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/3 "2022-03-11T15:38:57Z")
`https://mcgraphics.us/bbq/` menu-grid works, but when I add `https://mcgraphics.us/bbq/bbq_specials.html` bbq-story—code below—neither grid work. ```auto
hubbie and Nanette
Testimonial 1

BBQ

Smokes

How BBQ Smokes Started

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae sed dolores laudantium nesciunt. Quam recusandae officia nobis perferendis sunt, fugiat nemo eaque maxime consequatur voluptate, assumenda ullam dolores ad, ipsa exercitationem. Aliquid et ad nisi accusantium sed numquam necessitatibus architecto nesciunt praesentium ipsa! Aspernatur quis fugiat iusto temporibus illum exercitationem?

guy grilling
Testimonial 2
``` ```auto /* BBQ STORY */ .bbq-story { background-color: var(--background); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'two story guy'; justify-content: center; align-content: center; margin-top: 1rem; padding-top: 1rem; margin-bottom: 6px; } .header h1 { align-self: flex-start; justify-self: flex-start; padding-top: 0; margin-top: 0; } .header h2 { padding-bottom: 0; margin-bottom: 0; } .two { grid-area: two; align-self: flex-start; justify-self: flex-end; } .story { padding: 1rem 3rem; color: white; font-family: Open Sans, sans-serif; background-color: red; } .guy { grid-area: guy; background-color: var(--background); } .body-btn { font-size: 1.1rem; text-decoration: none; background-color: red; margin: auto; margin-bottom: 1rem; width: 200px; padding: 1rem; color: white; border-radius: 1rem; transition: background-color .5s; font-family: rokkitt, serif; text-align: center; font-size: 3rem; } /* END BBQ STORY */ ``` ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 11, 2022, 7:17pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/4 "2022-03-11T19:17:35Z")
Hi @kat, Again, what do you mean by > [@kat](#): > > neither grid work. If I look at the page with grids turned on, I get this: ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/eeb342c92a83242b26631705807976cbc9afdbee.jpeg) That is what you are specifying with your CSS, correct? The upper portion looks like this: ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/16c0140d6a996c139cbe992f69e6429384c0279c.jpeg) Which seems to match your CSS that was posted earlier. What is your expected outcome for them to be “working”? Cheers, Bob ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 11, 2022, 7:35pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/5 "2022-03-11T19:35:35Z")
Problem seems to be `display: grid;" in `.bbq-story` ```auto .bbq-story { background-color: var(--background); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'two story guy'; justify-content: center; align-content: center; margin-top: 1rem; padding-top: 1rem; margin-bottom: 6px; } ``` And the menu-grid top menu has more space at the left as the page gets larger. Goal is for both grids to be 3 columns centered. bottom grid should look like the screen shot you posted, and be the same column sizes as the menu grid above, screenshot below ![Screen Shot 2022-03-11 at 11.27.40 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5a581a3e187e6cb237aaf834b33bb6499ebaadc1.jpeg) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 11, 2022, 7:53pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/6 "2022-03-11T19:53:45Z")
Hi @kat, By quick glance, I’m pretty sure your HTML is malformed. Your entire `.bbq-story` is inside your `.menu-grid`. This forces the first section to become enlarged. Cheers, Bob ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 11, 2022, 9:45pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/7 "2022-03-11T21:45:42Z")
> [@RobM](#): > > Your entire `.bbq-story` is inside your `.menu-grid` . bbq-story wasn’t inside menu-grid in the PG tree. But I “outdented” bbq-story in PG which did separate the grids. But now bbq-story line up with the body tag. What is going on here? ![Screen Shot 2022-03-11 at 1.40.18 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/31ea8e0ef35ccef038d86306e3715d06d9a13bec.jpeg) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 11, 2022, 11:11pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/8 "2022-03-11T23:11:04Z")
When I loaded the URL, the `.bbq-story` was within the `.menu-grid` section. Just re-indent the `.bbq-story` by one. ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 11, 2022, 11:55pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/9 "2022-03-11T23:55:56Z")
That worked, but gosh was troubleshooting tough. Got any troubleshoot tips tutorials? Thanks for hanging in there with me. Here is it better to use sections rather than divs or something else, e.g., below? header - navbar stuff section - hero stuff section - menu stuff section - story stuff footer ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 12, 2022, 10:48am UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/10 "2022-03-12T10:48:05Z")
No real trouble-shooting tips or tutorials. For me it just comes from years of putting together pages. The HTML structure you outline above isn’t bad at all. It is using semantic elements to divide the page. If you look at the BBQ page, it is divided up pretty well. However, I see that you are using an H1 tag multiple times. Remember that the various heading levels are to give the content meaning - they aren’t for styling the text. Both screen readers and search engines use the headings to “understand” your page. There has been a push to adopt the use of a heading cascade for each section, but not yet. Cheers, Bob ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 12, 2022, 4:19pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/11 "2022-03-12T16:19:54Z")
That’s a big help. Thanks for the help and for saying, “If you look at the BBQ page, it is divided up pretty well.” Makes me feel like I’m learning. I’ll cut back on the h1, h2, h3… ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 12, 2022, 4:21pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/12 "2022-03-12T16:21:06Z")
The various headlines are fine except that you only want a single h1. As many as you want of the others. ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 12, 2022, 4:59pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/13 "2022-03-12T16:59:47Z")
Clarification please single h1. I thought you had to have an h1 then an h2, then an h3 in exact order, not so? ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [March 12, 2022, 5:47pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/14 "2022-03-12T17:47:29Z")
Did you read this bit? > [@RobM](#): > > However, I see that you are using an H1 tag multiple times. Remember that the various heading levels are to give the content meaning - they aren’t for styling the text. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 12, 2022, 6:58pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/15 "2022-03-12T18:58:46Z")
Hi @kat, So when a screen reader or search engine “looks” at your page they report back what the page is about from your h1. Yes, you want a hierarchy to the rest, but a section can have an h2 at the top and then multiple h3 for sub-headings. So, each section can have an h2 - like this: ```auto h1 h2 h3 h3 h2 h3 h3 ``` Make sense? You just don’t want to have: ```auto h1 h3 h2 h4 h2 h6 h5 h4 ``` Cheeers, Bob ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [March 12, 2022, 8:25pm UTC](https://forum.pinegrow.com/t/grids-dont-work/6368/16 "2022-03-12T20:25:23Z")
This is cosmic. I understand.