[ad_1]
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”
For those interested, here are some random experiments with CSS Grid layouts: https://codepen.io/collection/DdOKgm/
and here we sit in 2019 and still look at the presentation in awe
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…..
Why did I just find out about this in mid 2019??? Thanks Rachel Andrew
Which of the two is more user friendly, Bootstrap or Flexbox?
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
Apparently it's not changing anything.
"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.
bye bye CSS frameworks!!!
Great video, thank you!!! <3
Amazing presentation! Aside from grid starting at 1… breaks my heart lol.
His website is http://mor10.com/ btw
media queries: "Am i a joke to you?"
Simple is Sophisticated!
now we can use this great idea with SASS more efficiently, you lighted up us, thanks man 🙂
Very cool! 😎
The Microsoft Edge is going to support grid systems because it will be a chromium based browser
probably you made me hate CSS less 😀
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.
Yes holy CSS, You made our lives easier man !
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!
https://youtu.be/7kVeCqQCxlk?t=1596
Nice to see css is becoming better. Gtk has had this for a very long time
Just how clean is the cleanest HTML you'll ever see in WP. Usually looks pretty ugly to me.
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.
WordPress for Idiots…
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!
WOOOOOOOOOOOOOOOOOW!
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
It blew my mind… Thanks for the awesome presentation.
Whoa, cool! So, did @mor10
invent CSS Grid?
Thanks for it.
I will bet my life savings that this guy doesn't know what a vagina looks like