CSS Grid Layout and Flexbox layout experiment

Experimenting with Layout

It’s exciting to read about the growing support for CSS Grid Layouts. As it becomes more of a reality, I really wanted to become more comfortable with how to create a layout and brush up on the properties needed.

CSS Grid Layout

Flexbox

To compare, I created the layout in Flexbox. CSS Grid won’t replace Flexbox but how it is used might change slightly. For more complex layouts, CSS Grid seems to be more efficient.

Combination experiment

Found that the overall layout was best achieved with CSS Grid Layouts but within the layout, Flexbox was very handy for adjusting content and provided a lot of assistance with spacing and placement.