Issue 194
Subgrids, nested grid, CSS clip-path and Shapes.
News
Issue 194
I'm in San Francisco today at Smashing Conf, teaching people CSS Layout yesterday in an all-day workshop. I'm not speaking at the conference so this is chance to hang out with the Smashing team and a bunch of other fine folk in the sunshine here in SF. If you are at the conference come and say hi!
At my workshop yesterday I was able to show attendees some of the upcoming CSS Grid subgrid functionality. I've also written that up on my blog and it is linked below, I'm so excited to see this on the way!
Rachel Andrew, CSS Layout News
CSS Subgrid News and demos
I really can't wait to be able to teach subgrid in my talks and workshops. Here is an early look, folk at my Smashing workshop yesterday got to see bits of this too, which was fun.
Learn
Art Direction For The Web Using CSS Shapes — Smashing Magazine
An article about using CSS Shapes to create art directed layouts. If you have learned how to use Shapes then this is a good next step to really starting to create interesting layouts with them.
Using "box shadows" and clip-path together | CSS-Tricks
A quick tip showing how to use clip-path and box shadows together.
Are nested grids like nested tables?
Relevant as we start to play with subgrid. People keep telling me nested grids are like nested tables, in this post I explain why they are not.
Diagonal Containers in CSS | CodyHouse
Creating diagonal containers in CSS by using the CSS clip-path property.
Interesting
CSS Grid: Style Guide
A really lovely style guide design from Olivia Ng who has been doing some really nice things over at CodePen. I wish I had the design skills!
Our Sponsor
Flexbox, CSS Grid and much more. Understand CSS Layout with my video course.
I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.
The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.