• Saturday , 4 July 2020

CSS Grid Changes EVERYTHING – Amazing Presentation

Code Canyon

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

3d Ocean

Related Posts


  1. Morten Rand-Hendriksen
    July 10, 2019 at 14:00

    For those interested, here are some random experiments with CSS Grid layouts: https://codepen.io/collection/DdOKgm/

  2. Filip TM
    July 10, 2019 at 14:00

    and here we sit in 2019 and still look at the presentation in awe

  3. acajoom
    July 10, 2019 at 14:00

    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…..

  4. Alexander Parra
    July 10, 2019 at 14:00

    Why did I just find out about this in mid 2019??? Thanks Rachel Andrew

  5. Malick Cisse
    July 10, 2019 at 14:00

    Which of the two is more user friendly, Bootstrap or Flexbox?

  6. David Rice
    July 10, 2019 at 14:00

    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

  7. thomashrev
    July 10, 2019 at 14:00

    Apparently it's not changing anything.

  8. Japa Alekhin Llemos
    July 10, 2019 at 14:00

    "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.

  9. Rui Rodrigues
    July 10, 2019 at 14:00

    bye bye CSS frameworks!!!

  10. Tomáš Bartoš
    July 10, 2019 at 14:00

    Great video, thank you!!! <3

  11. Dennis LLopis
    July 10, 2019 at 14:00

    Amazing presentation! Aside from grid starting at 1… breaks my heart lol.

  12. Lyricc Master
    July 10, 2019 at 14:00

    His website is http://mor10.com/ btw

  13. Павел Ефименко
    July 10, 2019 at 14:00

    media queries: "Am i a joke to you?"

  14. 247Web Ltd
    July 10, 2019 at 14:00

    Simple is Sophisticated!

  15. ShadowofMC
    July 10, 2019 at 14:00

    now we can use this great idea with SASS more efficiently, you lighted up us, thanks man 🙂

  16. Ran Dawg87
    July 10, 2019 at 14:00

    Very cool! 😎

  17. Nizar Elfennani
    July 10, 2019 at 14:00

    The Microsoft Edge is going to support grid systems because it will be a chromium based browser

  18. Bartek Olczak
    July 10, 2019 at 14:00

    probably you made me hate CSS less 😀

  19. suicidal.banana
    July 10, 2019 at 14:00

    Grids are cool but there's a reason its not used at large scale yet, it doesn't work well with dynamic content, and the guy is a bit too dismissive of unsupported browsers.

  20. 1cathol
    July 10, 2019 at 14:00

    Yes holy CSS, You made our lives easier man !

  21. Namstel
    July 10, 2019 at 14:00

    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!

  22. Arezu
    July 10, 2019 at 14:00

    Nice to see css is becoming better. Gtk has had this for a very long time

  23. Jeff Hanson
    July 10, 2019 at 14:00

    Just how clean is the cleanest HTML you'll ever see in WP. Usually looks pretty ugly to me.

  24. Ricky Anthony
    July 10, 2019 at 14:00

    Great presentation. CSS overlords should pay him. I felt he voiced all my layout frustrations for the last 8 years the rest of the world called normal. Something in me is set free.

  25. Denis T.
    July 10, 2019 at 14:00

    WordPress for Idiots…

  26. Tim McNeill
    July 10, 2019 at 14:00

    Im about to embark on re-designing a new website for a massive charity, and i'm so glad i watched this before starting – thank you!

  27. Alnel Vincent Alico
    July 10, 2019 at 14:00


  28. Sophrosynicle
    July 10, 2019 at 14:00

    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

  29. JongHun Park
    July 10, 2019 at 14:00

    It blew my mind… Thanks for the awesome presentation.

  30. Eric Hepperle
    July 10, 2019 at 14:00

    Whoa, cool! So, did @mor10
    invent CSS Grid?

  31. Moein Alizadeh
    July 10, 2019 at 14:00

    Thanks for it.

  32. Mantis Toboggan
    July 10, 2019 at 14:00

    I will bet my life savings that this guy doesn't know what a vagina looks like

Leave A Comment

You must be logged in to post a comment.