PB101: L09 - Creating Common Page Layouts With CSS Grid

Good news! It's time to actually start page-building!

Remember the "everything is a box" lesson? Well, now you'll learn how to position those boxes in a typical page layout fashion.

Here's the secret: Most websites mix and match the same basic layouts. They're not as fancy as they might seem at first glance!

Here's the second secret: These layouts are super easy to create with CSS Grid. We don't even have to dive deep on Grid yet – surface-level grid concepts will get us really far!

So, grab a drink and block out the next hour or so. I will teach you the basics of CSS Grid, and then we will build a real-world example page.

Your homework is to build the same page as soon as you finish this training!

** MY TOOLS **

🔥 AutomaticCSS (ACSS) - https://automaticcss.com
🔥 Frames - https://getframes.io
See all my recommended tools here: https://geary.co/tools/

** INNER CIRCLE **

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!

Learn more and join here: https://geary.co/inner-circle/

** SOCIAL **

👉 FB - Facebook: marketingkev
👉 LinkedIn - LinkedIn: kevingeary

** CHAPTERS **

0:00 Intro
2:23 Why Grid is Superior to Flexbox
5:39 Grid vs Flexbox (Equal Columns)
15:48 Basic Layouts With Fractional Units
18:21 The minmax Function
23:22 Easy Equal Columns With the Repeat Function
27:30 Grid vs Flex (Repeating Layouts)
30:08 Real-World Page Layout (Messagely)
33:14 Hero Section
50:24 Features
56:27 Talking Points
1:05:46 CTA Section
1:07:55 Wrap-Up