Crash Course in CSS Grid + FlexBox

CSS Grid and Flexbox are two great CSS tools that solve a lot of layout problems for us. All the grid layout work we’ve done via Bootstrap can now be done with just a handful of CSS properties that are already baked into modern web browsers. If you’ve ever used Bootstrap just to get an easy responsive layout working (and we have all done this!) you know that Bootstrap works, but this can add a lot of bloat to the application, especially if you’re not using Bootstrap for other features as well. Instead, let’s learn CSS Grid and Flexbox, get the same layout benefits but without needing to install yet another CSS framework.

Target Audience:

Developers wanting an easy to use grid-style layout for their applications without the extra overhead of including a CSS framework.

Assumed Knowledge:

Working knowledge of HTML and CSS is required. Basic knowledge of media queries will be very helpful. No experience with a server-side technology is required.

Main takeaways:

• What are CSS Grid and Flexbox?
• Laying out a basic 3-column site.
• Using media queries to build responsive sites.
• Differences in CSS Grid and Flexbox.
• Other features beyond a basic layout.
• Pros and Cons.