CSS Grid can be confusing, but seeing real-life examples can be a help in understanding how you’d use it. In this video, I’ll share four quick CSS Grid layout examples.
1. Three equal columns
2. Header + content + footer = min-height: 100vh
3. Auto-responsive card layout
4. Responsive blog layout with fluid sidebar
Finished code: https://codepen.io/Coding-in-Public/pen/ZEyyBQR
# Helpful Links:
– https://web.dev/learn/css/grid/
– MDN Docs for grid-template-areas: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
– CSS grid cheat sheet: https://css-tricks.com/snippets/css/complete-guide-grid/
Color scheme from qclaydeaign on Instagram here: https://www.instagram.com/p/CTMzgpzADFD/
# Timestamps
0:00 Introduction
1:47 3 column Grid layout
2:38 Header + body + footer = min-height: 100vh
3:56 Auto-responsive card grid
6:23 Responsive blog page layout
13:06 Conclusion
source