Flexbox and CSS Grid Tutorials and Exercises

[Josh]

If anyone is interested in learning/practicing flexbox and/or CSS grid today, here are some links and exercises.

Tip: If you use Firefox, it has a new flexbox inspector tool.

Tutorials

Flexbox

• A quick intro to Flexbox
• CSS Tricks on Flexbox
• MDN on Flexbox

CSS Grid

• MDN on CSS grid
• CSS Tricks on CSS grid
• Grid by example

Misc Links

• Differences between flexbox and CSS grid
• Does CSS grid replace flexbox?

Exercises

Here are some typical page layouts that we can recreate (from scratch with flexbox and CSS grid) as exercises:

• Foundation layouts
• Bootstrap layouts

If you have more ideas or resources, leave a comment below.

[Josh]

I’m uploading my exercises here:

Flexbox and CSS Grid Exercises

[Josh]

After using flexbox for a little while I realized that I still don’t enjoy CSS and it would be a better use of time to just download a small grid library instead.

Here are three that I saw mentioned in one of those blog posts:

• flexbox grid (1.4k)
• gridlex (2.9k)
• frow

Flexbox grid looks like it will work.