General question
Could someone explain the screenshot please?
Why is it impossible? I know they explained it in text but I still can't imagine it, maybe a link to an image reference so I can visually imagine it would be helpful
10 Replies
Where are you reading this? Some of the surrounding context might help.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout#shorthand_properties
A bit of scroll up is needed from there ^ and you'll see it
Oh, I see ok.
Grid allows you to set how the grid-children align their contents, and with
justify-self you can set one grid-child to be different than the others. But, due to the single-axis nature of flexbox, you can't have one flex-child be justified differently than the others.
It's a wonky way of saying, "all flex-children must have the same justification property".Oh okay, I see
Thanks!
Unrelated to the description of this post, but I'm a bit confused on this part here too: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout#setting_align-content_space-between
Why does the grid become larger?
This is is also wonky, so hold tight:
Due to the way that the grid is laid out, without setting
space-between the grid is 3x3, with grid section A being 2x2, section B being 1x2, C being 1x1, and D being 2x1 due to the following:
However, once you put space-between you're adding space between *each of the grid "parts", so that space between is not between A, B, C, and D, but between each bit of them.Without
space-between (grid explorer turned on in FF)
With
space-between
Note the space between each "bit" of the grid? That's why your grid becomes larger
Even though Item 1 is in grid area a it's still filling an 2 columns and 2 rows, since it's a 3x3 grid. So when you
space-between it's not between each grid item but between each grid area. Does that make sense?Thanks for the in-depth explanation, yep, that cleared it up for me! 🙂