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:
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
- _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
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.
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?
Alessandro aka keebOo
I just want to say I think css grid is awesome.