Issue 32
Subgrids and Responsive tables in CSS Grid, CSS Shapes and another Flexbox game.
News
Issue 32
I'm writing this at Fluent where over the last two days I ran a training session taking attendees right through CSS Layout - from the very basics of layout right through to the newer modules including Flexbox and CSS Grid.
Something that always strikes me when I talk about CSS is how often explaining why things are as they are creates a lightbulb moment for people. We're used to searching and finding a solution to problems, however once you understand the reasons, which are often historical, for the way things behave it really empowers you to be able to solve problems for yourself.
Rachel Andrew, CSS Layout News
CSS Grid Layout. Current Status and Future Plans - Google Groups
An email to the blink-dev list detailing the current status of the CSS Grid Layout implementation. As someone who has been pushing for subgrid support to be included in the initial shipped version of Grid Layout I'm really happy to see mention of this.
Learn
Get up to speed with CSS shapes
A nice article with image examples and lots of tips for using CSS Shapes.
EnhanceConf - Jen Simmons - Progressing our layouts - YouTube
A video from EnhanceConf, a conference that has just happened in the UK with a focus on Progressive Enhancement. Jen Simmons talks on the subject of "Progressing our layouts".
Flexbox Defense
I think everyone has linked to this in the last week but it is good fun, and a nice way to learn Flexbox while playing a fun game.
A Grid Solution for the Responsive Tables Problem
Using CSS Grid to solve the problem of a data table in a responsive design. I initially rebuilt a "responsive calendar" example using CSS Grid, then tried to do the same but with more useful markup for the calendar itself.
Introducing CSS Scroll Snap Points | CSS-Tricks
I've mentioned Scroll Snap Points in this email in the past, and here is a tutorial explaining how this specification works with details of current browser support.
An Introduction to the CSS Grid Layout Module
Great to see more people writing about CSS Grid Layout, here is a tutorial with some nice examples on SitePoint.
Styling Broken Images
A neat solution for styling broken images using CSS.
Our Sponsor
No more trial and error based layouts
If developing a layout seems to mostly consist of trial and error, or you are relying on a framework in order to make layouts that work, I have a course for you. Throughout this video course I'll explain the mysterious aspects of CSS, giving you a solid foundation to create the layouts you want.
Purchasing a course also gives you access to our private Slack Community, discuss the things you are learning or any problems you have with other people doing the course - and me!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.