CSS Grid Changes EVERYTHING – Amazing Presentation



https://i.ytimg.com/vi/7kVeCqQCxlk/hqdefault.jpg



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, https://www.linkedin.com/in/mortenrandhendriksen/

SLIDES: https://www.slideshare.net/mor10/css-grid-changes-everything-about-web-layouts-wordcamp-europe-2017

PERMISSION: The original content of this video is under the Creative Commons Attribution license (reuse allowed).

ORIGINAL SOURCE: https://www.youtube.com/watch?v=txZq7Laz7_4&t=14s

Additional material for CSS learners:
https://amzn.to/2Tk6kBZ CSS: The Definitive Guide: Visual Presentation for the Web https://amzn.to/2FgQcMI A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer
https://amzn.to/2Ffp1ll CSS in Depth
https://amzn.to/2FlKV6N CSS Secrets: Better Solutions to Everyday Web Design Problems

Original source


33 responses to “CSS Grid Changes EVERYTHING – Amazing Presentation”

  1. Well let's be honest with each other. We all know that even Grids is a hack approach, they smell like tables very badly. Remember the time when if you were not doing divs you were not a real developer ? Web design has always been like that, a never ending attempt to make something less broken, on a list of broken browsers, on a huge number of broken operating systems. The future of web design will be in the hands on the visitor. Inside a VR or a Hologram the visitor will be completely free to remove any stuff he/she wants out of the way, in a similar way that today the "next" website is 1 click away and not on the same "pavement". Even today we install adblock or other plugins to remove stuff out of the way, or to change the theme of certain things on our desktops or mobile devices. Why ? because we want to have a choice. How many times have you visited a website that has forced you to disable adblock in order to use it and you said "ahhhhhhh feck yaaaaah" and closed it in less than a second ? and then every time you faced something similar you changed to "of course!" and closed it again ? Are you really sure that a future website design will force or default to what the website owner wants and not some "theme" chosen by the end user via their interface ? The more a system provides freedom of choice, the more the human brain wants to go with it. Smart companies already know this. It will all be "Metadata". The rest will just be "User Interface" and some cloud (or some better name in the future) computers doing all the "processing" and streaming back. Fully interactive, you can mess with it as much as you wish on your "screen". Take that shirt and virtually wear it and see yourself in the mirror. It's already happening. Anyway, tiny letters…..

  2. I love this talk on CSS Grid. I was a Computer Science student who dropped out once I discovered web development. CSS Grid was taking hold when I switched to web dev. This is such a great explanation. I was still making it complicated until you showed me the simplicity

  3. "any one of these 3 alone, is a piece of cake. combined, with just css and html, impossible".

    yeah, no. sorry this can be done with flex "row/row-reverse" and "column/column-reverse" as long as you write the mark up so that you can group things together.

  4. I've heard of grid before and seen some example, but this video really got me thinking in grids. You really make some excellent points that I haven't thought of before. It makes so much sense to have a defined layout, and then have the content just adhere to that layout. I'm 2 years late, but I guess it's better late than never. Thanks for this excellent presentation, Morten!

  5. Ok, I might stand corrected when he blows me away with the rest of the talk, but at the time of the talk, there were already easy to use solutions to the problem he's talking about from 0:50 to 1:28:

    1) @media {} queries.
    2) markup languages like SASS can also achieve this

Leave a Reply