Simple layout question

HTML & CSS
1

please see

i have been experimenting

i want to use my `display content options (center, stretch, space around, space between, space evenly and so on)

trying myself, no go

also, please correct any errors in my code

learn by doing, right?

2

Have you tried with display: flex; instead of display: grid;?

3

You have the template columns at 1fr which means there is no space around or between or any other alignment other than three columns each taking up 1 fraction of the available space.

Then you have given the actual elements a width which conflicts with the template-columns you created. If you wanted those elements at 300px width you would have done this instead.

grid-template-columns: 300px 300px 300px;

Now the space-around will take effect.

You have to remember that direct children of a grid parent are affected by the parents grid layout properties. It’s pointless saying you want the columns at 1fr and then you go and give the actual column a width that doesn’t match the template column as that creates an immediate conflict of interests. The idea of the template columns is that you create the structure you want with that rule. The elements themselves will need no widths.

4

got it

so my container is display:grid and only that container

i had another problem, but figured it out with out you

thanks for your time and trouble!

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.