Crash Course in CSS Grid plus FlexBox - Nolan Erck

CSS Grid and Flexbox are powerful CSS tools that simplify layout design without relying on frameworks like Bootstrap. These native browser features offer responsive layouts with less code bloat. Developers with HTML and CSS knowledge can create efficient, customizable grid-style layouts using these tools. The course covers basic 3-column layouts, responsive design with media queries, and compares Grid and Flexbox. It also explores advanced features, discussing pros and cons to help developers choose the right tool for their projects.

1. Nolan Erck
Crash Course in Flexbox
& CSS Grid
Rad CSS Layout Stuff You Can Do!

2. About Me
•He / Him / His
•Owner @ South of Shasta,

VP of Engineering @ e-Mission Control
•Organizer @ Sac Interactive Tech Meetup
(formerly Sacramento CFUG)
•Recovering Video Game Developer (Grim
Fandango, SimPark, Star Wars Phantom
Menace, etc)
•Music Junkie

5. What are Flexbox and CSS Grid?
•CSS language enhancements
•Solve common layout problems
•Alignment, height, grid systems
•CSS things that used to be more challenging
•Not a ColdBox add-on. ;)

6. What are Flexbox and CSS Grid?
•Not an add-on.
•Built into the browsers already.
•Does not require Bootstrap, Tailwind, CommandBox, npm, etc.
•It “just works”.

7. Flexbox Compatibility

8. CSS Grid Compatibility

9. Let’s Get Started!

10. Floats
1-floats.html

11. Positioning
2-positioning.html

12. Flexbox
3-flexbox.html

13. Centering
4-centering.html

14. CSS Grid

15. CSS Grid
•Flexbox = moving content in 1 direction
•Items in a container
•CSS Grid = moving content in 2 directions
•Rows, columns, space (gutter)
•Similar-ish to Bootstrap grid system idea (col-xs-12, col-md-4, etc)
•Like <table> hacks but done correctly
•A11y compliant, won’t get you sued

16. CSS Grid Columns and Gaps
Source: w3schools.com
•Grid broken up by “lines”.
•Can be a tricky concept at first.
•Number the spaces between the
rows and columns, not the
columns themselves.
•Takes some planning to lay out
your pages.

17. Grid Inspector
Source: smashingmagazine.com

18. For More Info
•Scott McCallister’s video on YouTube
•on the South of Shasta YouTube channel
•Ben Nadel’s recent blog(s)
•Fun Fact: Works for PDF generation w/ the latest ACF, released this week!
(Probably Lucee too, I just haven’t tried it yet to confirm.)
•A zillion other YouTube videos and tutorials, all explain it a little differently from
each other. Which is a good thing.

19. Learning in 30 Minutes a Day

20. Any questions?
•You can find me here:
•southofshsata.com
•Twitter @southofshasta, @nolanerck
•[email protected]

21. THANK YOU
Thanks to our sponsors