How do I line up the boxes horizontal with equal space in between each other? I did justify content: space-between, and it did not work.
Those inline grids have no parent element (other than the <body>) so they are not part of any grid or flex system, therefore justify-content won’t work on them.
They will need a containing grid or flex.
1 Like
Like @SamA74 says. you need a parent that has display: grid, or display:inline-grid on it.
Remember, flex and grid both work from a parent=>child manner, so the parent is declared as flex or grid, and the items underneath get handled appropriately.
The difference between grid and inline-grid is the behavior of the parent itself.
This would be display:grid;
foo
GRID
bar
this would be display:inline-grid;
foo GRID bar
Essentially grid and inline-grid tell the browser to apply either display:block or display:inline-block to the PARENT
1 Like
As the other have said you need a grid parent but you also need to decide what the width of those items are going to be because you won’t have any space between if they all stretch to 100%.
Are they all to be the same width, or content width only, or variable widths? Only once you can clarify how they should behave can you start to work out how to code them 
For some reason, still displays as block?
That’s because grid doesn’t automagically change the flow like flex does - it makes you work for it.
I changed it to this (and added a margin to separate it a bit…)
.grid {
display: grid;
margin: 1rem 0;
grid-template-columns: repeat(3, 200px);
justify-content: space-between;
}
.inline {
color: lightgrey;
border: solid;
height: 100px;
}
Which gives you this:
If you need good resources for flex and grid, I recommend the pages on css-tricks
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.