# Css grid problems **URL:** \ **Category:** Beginners\ **Created:** [September 18, 2021, 8:44pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680 "2021-09-18T20:44:40Z")\ **Posts on this page:** 20\ **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:** [September 18, 2021, 8:44pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/1 "2021-09-18T20:44:40Z")
Initially [mcgraphics.us/art](http://mcgraphics.us/art) was done with foundation. I decided to change the gallery, and the price list at the bottom to css grids. 1. I can’t get the gallery cssgrid to span more than 4 images. I’d like to go fully across the browser window. 2. Around 1200 w the price list move up to the left side of the grid. Suggestions please ![Screen Shot 2021-09-18 at 10.42.21 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f1dc7dfd9c8b5640a9f915f13f6db5c57fdf38f2.jpeg) ![Screen Shot 2021-09-18 at 1.29.52 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/61b6ec5e12d6ec6fdda1bde8fac4001430c5d1d3.jpeg) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 19, 2021, 10:40am UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/2 "2021-09-19T10:40:51Z")
Hi @kat, I just took a look at your site and it seems like the gallery is still completely styled using Foundation classes. To get the gallery pictures to take up the whole width and for the pricing to not jump up to the side, you need to wrap the columns with a div that has a class of `row`. This will also have the effect of taking the pricing grid out of the current flow, placing it below the pictures. Not sure this is what you want. Cheers, Bob ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [September 19, 2021, 2:51pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/3 "2021-09-19T14:51:38Z")
@kat re: the gallery the div that contains the pictures has a class large-8 and it would need to change to large-12. Then on each div containing a picture you would need to change the class from large-3 to large-2 for example (applied to first 6 columns in the screenshot). That should allow the gallery to span the full width of the page and display 6 pictures on a large screen. ![code-changes](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/079264378f79ec105f49a3a32ae47cd0b6089681.png) ![code-changes-result](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0fad58b0a47f8d1bac8609aa198bf5faa29eb1fc.jpeg) ---
**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:** [September 19, 2021, 5:26pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/4 "2021-09-19T17:26:42Z")
Thanks, Rob. Changing the foundation classes was a great fix for [mcgraphics.us/art](http://mcgraphics.us/art) [mcgraphics.us/art/indexGrid.html](http://mcgraphics.us/art/indexGrid.html) I’ve been trying different css grid codes. Worked great at first, then I did something wrong. Help please ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [September 19, 2021, 6:22pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/5 "2021-09-19T18:22:27Z")
@kat my advice would be to take the code that is working [mcgraphics.us/art](http://mcgraphics.us/art) and start your experiments again on [mcgraphics.us/art/indexGrid.html](http://mcgraphics.us/art/indexGrid.html). If you are using Pinegrow to make changes you might be able to go back through backups and see where it went wrong but I’ve often found myself in a similar position and it has been the easier to just use the last working version, in this case what you have on the first link. Without know what steps you took before things went wrong it would be very difficult to figure it out. ---
**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:** [September 19, 2021, 6:51pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/6 "2021-09-19T18:51:35Z")
I’ve been back and forth between PG & VSC. Pg backups didn’t go back far enough. But I like your idea of taking index.html, copying and starting over. I’m watching Maz’s css grid, again. He’s got a gallery in there. Shows a lot that can go wrong. Helpful. All about learning. ---
**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\ **Post date:** [September 20, 2021, 8:25am UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/7 "2021-09-20T08:25:44Z")
@kat its all part of the challenge and fun of learning and often its when something breaks that we start to better understand things. Hopefully you’ll get back on track and make progress. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 20, 2021, 10:15am UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/8 "2021-09-20T10:15:10Z")
Hi @kat, HTML is all about being very methodical. For (almost) any opening tag, there should be a closing tag. Items that are children of another item need to be within the tags. Those that are independent shouldn’t. If you look at your DOM structure, you can see that you have placed your lower gallery images inside the tag of your third gallery image. [![](https://dl.dropboxusercontent.com/s/cknytoc0mgdnean/Screen%20Shot%202021-09-20%20at%206.12.34%20AM.png?dl=0) ](https://dl.dropboxusercontent.com/s/cknytoc0mgdnean/Screen%20Shot%202021-09-20%20at%206.12.34%20AM.png?dl=0) So you have a div.cat, then a div.dog, then another div.dog. You next div.cat is inside the closing tag for the previous div.dog, so all the subsequent images are part of the third div.dog. Does this make sense? Other than that you grid looks correct for 5 images across. 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:** [September 20, 2021, 4:22pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/9 "2021-09-20T16:22:24Z")
Fixing structure is where Pinegrow really shines. Just closed all levels, cat & below then in the tree dragged all to line up with dog column – voilá! Now on to css grid sizing, minmax – terror ; ) ![Screen Shot 2021-09-20 at 9.09.10 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d93d2715d3af16c964bb8d1880830614e8db9774.jpeg) ![Screen Shot 2021-09-20 at 9.11.32 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7e0cf78bf56fae391babf3bca620762b3ac517f1.jpeg) ---
**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:** [September 20, 2021, 6:42pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/10 "2021-09-20T18:42:36Z")
Here is Maz’s grid gallery. My images are 400px and I want them to reduce proportionately–not happening. Maybe not Object-fit Cover? Also the gallery runs over the top of the pricing grid. I think you mentioned something about putting it into a row earlier? ![Screen Shot 2021-09-20 at 11.24.10 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9d91a7e771866fdc6690d30e8b70dea5a082b9f5.png) ![Screen Shot 2021-09-20 at 11.34.07 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/aa0166fe9c93228f8e52de6c5f661748efd7d7ab.jpeg) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 20, 2021, 7:32pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/11 "2021-09-20T19:32:44Z")
Hi @kat, Without seeing the code, I’m not quite sure of the advise to give. However, I think you likely want `object-fit: contain`. With regards to the pricing section - maybe it needs to move out of the div with the gallery images into its own section above the footer? 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:** [September 20, 2021, 11:06pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/12 "2021-09-20T23:06:50Z")
> [@Rob](#): > > its all part of the challenge and fun of learning and often its when something breaks that we start to better understand things. Hopefully you’ll get back on track and make progress. Every time something goes wrong my troubleshooting gets better as I learn what can go wrong for next time. Nice thing is that it’s often something simple like moving out of a div in the tree, or not closing a tag. ---
**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:** [September 21, 2021, 4:31pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/13 "2021-09-21T16:31:58Z")
1. Why did Matjaž Trontelj use \> in `.gallery > img` rather than `.gallery img`? 2. None of object-fit options worked to contain images proportionally in [mcgraphics.us/art/indexGrid.html](http://mcgraphics.us/art/indexGrid.html). All images extend beyond grid and crop. 3. Any way to save open file as a backup in \_pgbackup? 4. Problems with the bottom pricing table. I’ve tried various options which made it worse. I suspect it has to do with the gallery images extending beyond their grid. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 21, 2021, 6:04pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/14 "2021-09-21T18:04:41Z")
Hi @kat 1. Not sure who “Maz” is or when this was used, but the child combinator `>` is more strict than the descendent selector (a space). Basically, it just means only those images that have an element with a class of `gallery` as their direct parent. In your case it wouldn’t work because you have wrapped each of your images in a `h6` element. 2. The object-fit property needs the parent element to have a set-height. Right now, that is the `h6.panel`. Give this a height of 100%. Next, use `object-fit: contain` on your image, plus set the margin and padding to 0. 3. Currently there isn’t a way to add a page manually to -pgbackup. 4. Make the changes to your gallery and see if the pricing table problems persist. As a side note/question. Why add your gallery images in `h6` elements? It isn’t something I would think to do and I’m wrestling if this makes sense semantically. I think it is adding extra styling that might be making your job more difficult than using a `div`. I’m fairly sure a screen reader would choke hard. 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:** [September 21, 2021, 6:19pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/15 "2021-09-21T18:19:35Z")
Sorry, Maz, (easier to say) = Matjaž Trontelj ---
**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:** [September 21, 2021, 11:44pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/16 "2021-09-21T23:44:49Z")
Took out h6s. Now div encloses imgs. Interesting, new changes in [mcgraphics.us/art/indexGrid.html](http://mcgraphics.us/art/indexGrid.html) didn’t help grid overflow, cropping and covering price table heading. Copied from Firebox browser tools historystyle.css `.column, .columns { column-rule: 0; padding: 0; margin: 0; width: 100%; height: 100%; }` foundation.css `.column, .columns { position: relative; float: left; }` This page is old & I’ve been redoing for years. Likely initially text in h6. I do enjoy the process. Hopefully I’m learning. Thanks for your patience. ---
**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:** [September 22, 2021, 12:39am UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/17 "2021-09-22T00:39:49Z")
Hi @kat , I’m not sure if this makes a difference, but if you grab the corner of of your browser and drag it around, increasing, decreasing window size, you will see that several of the images (bulldog etc) seem much larger, or rectangular in size as opposed to square and as the page morphs and moves, the images move around to fit - yet overlap and squash over each other, leaving artifacts poking out around corners between other images etc, as though there is a white margin or suchlike that partially obscures other images - which are all - different sizes and shapes. should the images be the same size for this to work this way? Same shape? This is why the lower heading appears and dissapears. otherwise, I really like it 🙂 ---
**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:** [September 22, 2021, 1:53am UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/18 "2021-09-22T01:53:31Z")
I’ll check. Easy enough to miss something. Thanks for the suggestion, and the compliment, schpengle. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 22, 2021, 9:57am UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/19 "2021-09-22T09:57:58Z")
Hi @kat, You are almost there. Two additional properties for your images. ```auto max-height: 100%; object-fit: contain; ``` I think that should work. 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:** [September 22, 2021, 4:16pm UTC](https://forum.pinegrow.com/t/css-grid-problems/5680/20 "2021-09-22T16:16:22Z")
`.gallery > img { object-fit: contain; width: 100%; max-height: 100%; }` [mcgraphics.us/art](http://mcgraphics.us/art) still crops off and on and the grid runs over the h2 in the wrapper depending on browser size. But it looks pretty good, so I’m going back to Matjaž’s css tutorial. And hopefully Rob, you’ll do another tutorial, but not on css for awhile! Another question. This is foundation but web dev tools mention bootstrap. Why? ![Bootstrap_Foundation](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/833585c843f645a2312d0c759f33a85714ce44aa.png) [Next page](https://forum.pinegrow.com/t/css-grid-problems/5680.md?page=2)