Angular and CSS Grid: Get ready to fall in love

on YouTube ↗01h 49m

" summary

Claim: CSS Grid plus Angular actually removes layout hacks and makes two‑dimensional layouts manageable. Demonstrations use place-items: center, grid-template-areas, and the common pattern repeat(auto-fill, minmax(150px, 1fr)); tools include Firefox’s grid inspector and an Angular repo (space walk) with workshops and working examples: centering, image gallery, overlapping planets, a full‑viewport app and a playing‑card layout. Grid rolled out broadly in early 2017; the examples build and run and the patterns (fr units, nesting, implicit/explicit grids) reliably work.

AI-written summary · about

" chapters (23)

1. 0:00Introduction
2. 4:38David Siegel
3. 5:36Pixel shims
4. 6:18Small gifts
5. 8:25Give up and use tables
6. 10:59What this talk is about
7. 12:41Go to GitHub
8. 14:51No application shell
9. 18:11Centering
10. 27:08Blocks
11. 33:57Grid is not HTML
12. 42:35Grid gap
13. 44:42Grid layout
14. 45:25Grid width
15. 47:02Columns
16. 47:48Tables
17. 48:34Explicit vs Implicit Grid
18. 50:12Bob
19. 50:50Bob in Column 1
20. 51:47Fixing the Footer
21. 53:26Workshop Zero
22. 53:48HTML
23. 54:17Building Blocks

" related talks

• 01h 40mUser Interfaces in the Age of Intrinsic Web DesignBill Odom · Craft Conference 2019
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 32mCSS Grids: the Near Future of LayoutMassimo Artizzu · CSS Day 2017
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 02h 55mCSS Grid is the new blackChen Hui Jing · JSConf.Asia 2018
• 45mCSS Grid - What is this Magic?!Amy Kapernick · NDC London 2019
• 58mCSS Grid - What is this Magic?!Amy Kapernick · NDC Oslo 2019