Below are the advanced slides for my WordCamp Europe 2017 talk CSS Grid Changes Everything (About Web Layouts) presented June 17th, 2017 in Paris, France:
From the website:
“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.”
Links from the talk
- Photo of Dr. Martens boots by Kevin Spencer, BY-NC
- Bootstrap
- _S (Underscores) WordPress Starter Theme
- Codepen demonstrating a CSS Grid layout with content reordering
- Can I Use display: grid
- Jen Simmons Tweet about New York Times using CSS Grid
- Firefox CSS Grid Inspector at MDN
- Grid by Example by Rachel Andrew
- MDN CSS Grid documentation
- CSS Tricks’ Complete Guide to CSS Grid
- Kuhn – a WordPress theme based on CSS Grid
- Build Production-Ready CSS Grid Layouts Today at Smashing Magazine
- Mor10.com
Video of the talk will be posted here as soon as it’s available. Until then, read through the slides above and follow the links for more information on this transformational CSS module.
6 replies on “WCEU2017: CSS Grid Changes Everything (About Web Layouts)”
I just watched the recording of your WCEU talk on CSS Grids. One word: Inspiring.
Hats off to you for a very captivating talk. The way you explained all the details about CSS Grid was clear. Even though I am not a designer by trade, I am excited to try this out. Your presentation skills are top notch!
Many thanks for asking and answering that question about whether the Frameworks will adopt the CSS Grid. Primarily, I work with ecommerce sites, so I can see how the CSS Grid makes things much easier with less work.
I currently use Genesis. I am not too sure whether or not they do/will support CSS Grid in the near future.
Thank you Amit. My guess is Genesis will get on board quickly. As for the true CSS frameworks, I hear Foundation is working on something. We will just have to wait and see.
I have a question. I am just beginning to learn CSS with the goal to completely re-code my hobby website to a RWD. I desktop site was a boiler plate design so I didn’t code the CSS part.
If i am just beginning the learning CSS part, should I start with traditional CSS or try to understand the grid components? What would be the best learning path with this goal in mind.
I would really appreciate your response.
Don
@Don – In my opinion, learn HTML, CSS and JavaScript as deeply as time and interest allows. This will hold you in good stead for most things in web design and development. CSS Grid is just a new addition to CSS. As always, when to use CSS Grid depends on your project needs (i.e. do you have to support older browsers which don’t handle CSS Grid?). Even here you can do it so your CSS grid layout progressively falls-back to something older browsers can support.
Hi, I found only today your presentation on YT (https://www.youtube.com/watch?v=7kVeCqQCxlk).
First of all… AWESOME! I start just now to change my way of make it, finally!
From the first words… is so.. why we have to do these… hacks always to respect the design!
So excited, and start to spreading to all collegues and friends.
Btw… for single elements like a styled button (that before was in charge to bootstrap, foundation…) what is your approach? In you experience using CSS grid?
Thanks,
Alessandro aka keebOo
I just want to say I think css grid is awesome.