CSS Grid Alignment Help!

Hello! I need some help with this CSS grid I’m working on. Here is the CodePen:

I am trying to get the input checkboxes in #type-list to line up with the different types of pokemon in the background image for the #type-options element.

I would like the checkboxes to be in a 3X6 grid, so I made my CSS grid 5X6 (I added 2 extra columns to make up for the gap on both sides of the background image- this may not be correct?).

I then tried to assign each checkbox a grid-column-start/end and grid-row-start/end by using line numbers:

But all it did was this:

I’m not sure if maybe I’m using the line numbers wrong?

I then thought that maybe I needed empty divs to fill the two empty columns, so I also tried adding those but it didn’t fix the problem either.

I’m stumped at the moment, and I’ve run out of ideas to try. So if anyone has any tips, I would love to hear them. Sorry if this was confusing, I tried to make it was clear as possible but it was a bit difficult lol

Thanks for the help! :slightly_smiling_face:

Hi, I think you need to adjust the css on your type-list container for starters.

I just tried this and I think it helps.

#type-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 100%;

You had too many rows and columns.

Also, you may try adding each image into it’s own box along with the checkbox. This will help with making the page responsive.

1 Like

Hey @decoded-universe, the way you are trying to achieve the layout may be a bit… sketchy.

Aligning elements based on a background image has too many if points:
What if the image fails to load?
What if someone resize the screen? will the block resize? if so how will the image background will behave?

and so on…

Imho the easiest approach would be to actually cut the image into the single bits, then use each of them “inline” as an img element.
Requires a bit more work upfront (cutting all the images), but should save you some times down the road.

However if you really want to keep as it is, my best idea for a grid system would be repeating cols and rows with a base size value.
Or in code:

#type-list {
 display: grid;
// create 3 columns of 1/3 of space
grid-template-columns: repeat(3, 33.33%); 
 // create 6 rows of 110px, change this based on how actually 
// each image is height
grid-template-rows: repeat(6, 110px);

But as you can see it still relies on some arbitrary value :slight_smile:
Hope it helps :sparkles:

1 Like

Thank you for the detailed explanation. I had a feeling I may have to do them individually. It does seem to be the best way :slight_smile: