Skip to content
Hallway
0:00 / 0:00

#cssgrid#webdesign#responsivedesign

CSS Grid Changes EVERYTHING - Amazing Presentation

Coding Tech

712K subscribers • 3 videos on Hallway

YouTube
  • Recommended by 5 people: 4 on Hacker News and 1 in engineering communities.
  • 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.

1.1M views9 years ago5 recommendations

Web developmentCSS and layoutVue, Svelte, Angular and others

Morten Rand-Hendriksen explains how CSS Grid introduces a native, two-dimensional layout system that changes how responsive web pages are designed.

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! 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. EVENT: WordCamp Europe, Paris, France, June 2017 SPEAKER: Morten Rand-Hendriksen, linkedin.com/in/mortenrandhendriksen/ SLIDES: slideshare.net/mor10/css-grid-changes-everything-about-web-l… PERMISSION: The original content of this video is under the Creative Commons Attribution license (reuse allowed). ORIGINAL SOURCE: youtube.com/watch?v=txZq7Laz7_4&t=14s Additional material for CSS learners: amzn.to/2Tk6kBZ CSS: The Definitive Guide: Visual Presentation for the Web amzn.to/2FgQcMI A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer amzn.to/2Ffp1ll CSS in Depth amzn.to/2FlKV6N CSS Secrets: Better Solutions to Everyday Web Design Problems

Why it's here

5 people recommend this

What people say. Recommended as an eye-opening presentation that clearly explains the power and mental model of CSS Grid.

u/lourotin r/Frontend • Recommends

CSS Grid changes everything
51View on Reddit

bpicoloon Hacker News • Recommends

On “Branching Layouts With Ease”

You don't need to worry about UC browser if you aren't in China (that knocks several other browsers > 1% "global" share too). Opera Mini + IE11 is ~5.5% unsupported. One recommendation from the video the other day was also very good in this regard: link to this video Create something that works on mobile, then use grid to build outwards. Then you get reasonable views on unsupported platforms (the mobile-centric view, and most platforms that don't support grid are Mobile) and grid works where it can / needs to. IE11 will -never- support grid. Don't let that hold you back! (Unless you're specifically developing for an IE11-rich market)
View on Hacker News

benjaminjackmanon Hacker News • Recommends

On “CSS Grid for UI Layouts”

I came across them from this video, when I heard the "it's almost like ASCII" part (I had it on in the background) something clicked in my head and I had to drop everything to try it out. link to this video Watch on for the 'crazy response design' part. I am still amazed.
View on Hacker News

TACIXATon Hacker News • Recommends

On “Ask HN: What is your favourite tech talk?”

CSS Grid Changes Everything - link to this video The speaker is good but I think I like it just because it fixes the relationship between HTML and CSS.
View on Hacker News

luggon Hacker News • Recommends

On “Tasks That Can Be Done with Pure HTML and CSS”

I am still blown away by how powerful CSS grid is. link to this video It's sad it doesn't get more use. Potwntially this is because CSS frameworks hide all this away and nobody is really learning CSS anymore but I wouldn't really know. I'm not really that exposed to the web front end side of things.
View on Hacker News

u/i-eat-kittensin r/haskell • Mentions

On “RFC: alternative Hackage homepage layouts”

I just want to plug CSS grid layout again. Rather than nesting web content in a jumble of div tags for layout purposes, floating stuff this way or that, you just emit a sequence of named page elements. You then define a grid in CSS to specify where each element belongs on the page. This example probably demonstrates better than I can explain: https://gridbyexample.com/examples/code/example12.html AFAIK CSS grid layout is supported by all modern browers, most since early 2017, and the target audience for Hackage should be fairly current. The markup can be more semantic, and responsive is pretty clean too: https://gridbyexample.com/examples/code/example13.html
4View on Reddit

u/i-eat-kittensin r/haskell • Mentions

On “RFC: alternative Hackage homepage layouts”

CSS Grid Changes EVERYTHING CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)
3View on Reddit

u/blazksin r/elixir • Mentions

On “Noob in web development crying a river and asking for guidance”

"CSS Grid" might be the one where you should look into. It seems like the perfect use case for your webapp Here is my favourite presentation about CSS grid, its really easy to understand: link to this video A quick game for learning CSS grid: http://cssgridgarden.com/
3View on Reddit

luggon Hacker News • Mentions

On “Goodbye, Flash”

> A static layout will never know how to reflow itself when the window size changes; it needs code to define that behavior. This is no longer true. CSS grid solves this completely. link to this video
View on Hacker News