Loading
Current section: Subgrid Alignment 7 exercises
solution

Adjusting Grid Gaps for Seamless Alignment

Loading solution

Transcript

00:00 I promised you this was not going to be too complicated, let's dive in. Now that our parent grid is controlling the grid rows, this gap is way too big and we want to make it match the gap of the tiles grid, which is level 4. This one is, I believe, 24.

00:15 So we want to keep this horizontal gap here the same, but we want to change the vertical gap, the gap Y, to match the value. So this is our parent grid, which is the one that now controls the cells, and we have that gap 24 at XL.

00:31 So we want to keep that for the X axis, like this, but we want to do XL, gap, Y, level 4, and this is now going to be very satisfying, check this out, boom! Everything is now lined up super well, obviously the top two are still stretching out because

00:48 of the content here, but once we start working on that content and placing it in the right places in the parent grid, everything is going to line up perfectly.