Skip to content
Hallway
0:00 / 0:00

#cssgrid#responsivedesign

Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts)

WordPress

118K subscribers • 2 videos on Hallway

YouTube
  • Recommended by 1 person: 1 on Hacker News.
  • Presented by Morten Rand-Hendriksen
  • Linked in the descriptionSlides on SlideShare
  • May be out of date. Uploaded 9 years ago, in an area where tools change fast.

Beginner. No background in the topic needed.

51K views9 years ago1 recommendation

Web developmentCSS and layoutVue, Svelte, Angular and others

Morten Rand-Hendriksen explains how CSS Grid introduces a native grid system that allows responsive, flexible layouts independent of document source order.

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today. The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface. In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way. CSS Grid is here, and you can start using it today. This talk shows you how to do it right. Presentation slides: slideshare.net/mor10/css-grid-changes-everything-about-web-l… WPTV link: wordpress.tv/2017/06/30/morten-rand-hendriksen-css-grid-chan…

Why it's here

1 person recommends this

What people say. Recommended as a convincing introduction to CSS Grid that shows how to design layouts without relying on heavy frameworks.

rsotoon Hacker News • Recommends

On “Best Practices with CSS Grid Layout”

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 presentation1 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: link to this video
View on Hacker News

kethon Hacker News • Mentions

On “Show HN: Layoutit – An interactive CSS Grid generator”

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: link to this video
View on Hacker News

BlackMondayon Hacker News • Mentions

On “CSS grid garden”

If possible you could alternatively have send her (every browser which doesn't support full grid) a mobile layout like described in the video: link to 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 function…
View on Hacker News