Issue 11
grid-column-gap, grid-row-gap and grid-gap are in Canary!
News
Issue 11
My conference season continues. I've put together some new material taking Flexbox, Grid and Box Alignment and showing how they create new layout possibilities for the web. Over the last few days I've presented versions of that material at Fronteers and Falsy Values, you can find the slides and links here.
CSS Layout News
Grid Gutters in Chrome Canary
I'm very happy to see that the grid-column-gap and grid-row-gap properties, along with the shorthand grid-gap are now in Canary. I was very keen to see gutters implemented as I think that for simple grids with uniform gutters they will make development much simpler. You can read my post about gutters, and see an A/B comparison of this simple example where I have to create gutter tracks, versus one using the new properties.
CSS Layout News
Learn
Using extended srcset and the picture element to tailor your image to every device and layout | Microsoft Edge Dev Blog
An in-depth look at responsive images by the Edge team as with Windows Insider Preview Build 10547, Microsoft Edge supports srcset, sizes and picture. This post includes technical details of how browsers deal with responsive images - meaning that you can make better decisions in terms of how you use them.
Understanding and Using rem Units in CSS
Not layout however if you are doing responsive design then you will find moving to rem units for font sizing useful. Here is a good tutorial to help.
Interesting
Flexbox Tester · MadebyMike
A page to help you understand how to calculate the eventual size of items that have a positive flex-grow or flex-shrink value.
CSS Shape Tools
If you are using CSS Shapes then the Show Shapes bookmarklet is very useful. Drag it to your toolbar and you'll be able to see the Shapes highlighted on your page.
Our Sponsor
A CMS for front-end developers
With a simple, elegant template language that leaves you in control of your markup and CSS, Perch is a CMS that works with you and the way you want to create websites.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.