Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts)
WordPress1 HN recommender · recommended in 1 month, 2018-2018
51K views · 9 years ago · talk · dated
Morten Rand-Hendriksen argues that CSS Grid changes web layout, showing how to place content in cells independent of HTML source order and reshape layouts with media queries. It makes the case for using Grid now that browsers support it.
HN commenters say it convinced them to drop other layout approaches and embrace Grid, and cite its advice on fallbacks for older browsers.
32:06CSS Grid Changes EVERYTHING - Amazing Presentation
Coding Tech
1.1M views • 9 years ago
4:18Flexbox vs. CSS Grid — Which is Better?
Layout Land
314K views • 8 years ago
43:33Andy Bell – Be the browser’s mentor, not its micromanager
Hey! Presents
23K views • 4 years ago
32:25"Building a Toolkit for Design" by Matthew Griffith
elm-conf
25K views • 8 years ago
44:36Hacker Way: Rethinking Web App Development at Facebook
Meta Developers
900K views • 12 years ago
15:15why Japan's internet is weirdly designed
Answer in Progress
5.2M views • 3 years ago
1:07:46Building a Better Web Browser - James Mickens - Harvard CS Colloquium 2015
Paul Irish
29K views • 10 years ago
35:32Cheng Lou - On the Spectrum of Abstraction at react-europe 2016
ReactEurope
63K views • 10 years ago
1:06:46Crockford on JavaScript - Section 8: Programming Style & Your Brain
YUI Library
111K views • 14 years ago
25:55React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience
Meta Developers
26K views • 11 years ago
18:27dotJS 2012 - Brian Leroux - WTFJS
dotconferences
209K views • 13 years ago
1:58:46Dynamic Languages Wizards Series - Panel on Language Design
Eduardo Cavazos
16K views • 14 years ago
30:55[JSConfUS 2013] Steven Wittens: Making WebGL Dance
JSConf
56K views • 13 years ago
27:42Mark DiMarco: User Interface Algorithms [JSConf2014]
JSConf
52K views • 12 years ago
18:55[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook
JSConf
45K views • 13 years ago
52:23Nicholas Zakas: Scalable JavaScript Application Architecture
YUI Library
68K views • 15 years ago
46:18Om Next - David Nolen
ClojureTV
44K views • 11 years ago
36:45Jordan Walke - React to the Future
ReasonConf
48K views • 6 years ago
33:52Nordic.js 2014 • Douglas Crockford - The Better Parts
Nordic.js
73K views • 12 years ago
9:43Meteor Screecast
meteorscreencasts
50K views • 14 years ago
3 comments from Hacker News
If possible you could alternatively have send her (every browser which doesn't support full grid) a mobile layout like described in the video: ▶ this video > From this follows a simple but surprising truth: The lack of support for CSS grid in an old browser should not affect the experience of the visitor, but rather just make the experience different. > If you agree with this (and you should), there is no reason you can’t use CSS grid today! > Here’s how that approach could work in practice. Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them. It might sound like progressive enhancement, but it’s actually more of an accessibility-centric approach enabled by a mental shift. link
I remember a video + blog post about this, and it was suggested to just ship a mobile layout for browsers that don't support css grid. At least for personal sites that seemed reasonable. EDIT: ▶ this video
I'm reading the comments and I think there's a lot of misunderstanding about what CSS Grid is. Mostly because the spec is big and there's not just one way to do things, so it gets mixed with flexbox and tables. I recommend watching last year's Morten's CSS grid presentation[1] as it has convinced me to stop using other layouts/frameworks and just embrace grid, which is truly amazing and it has been a blast working with it and making responsive websites without worrying too much about the markup. 1: ▶ this video