Streaming live at 10am (PST)

CSS grid to achieve flexbox layout

Hello everyone,

I have attached pictures showing three different layouts predominantly with CSS grid and flexbox. Is there a way to achieve the 2 flexbox spacing layouts with grid? I noticed from this example that using the grid would not give equal spacing as the spacing in the grid is affected by the element size (regardless of putting a gap or not), hence theres a much smaller spacing between support text and the search icon as opposed to the wider spacing between the seach and the bag icon due to the element sizing?

FYI: I know i can just use flexbox and achieve my desired spacing, I am just enquiring so i can expand my knowledge on CSS grid.

Hi Nkenna,

in theory, this might be possible with giving each box a very specific size, but this is probably very tedious and impractical.

As far as I know, flexbox is more about the space in between different elements, measuring from the edge of one object to the edge of the next one. This gives you equal spacing between elements, regardless of the element’s size.

CSS Grids are more like a set of drawers. If you can fit the element inside – great. But the space between these drawers will always be the same, ignoring the size of its contents as long as it fits inside the drawer. There is no in-between, the tiniest space is always one drawer/box.

I hope this made sense and helped you somewhat :smiley:

Cheers
Leon