Skip to content

Issue 11

grid-column-gap, grid-row-gap and grid-gap are in Canary!

Rachel Andrew
2 min read

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.

windows.com


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.

sitepoint.com

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.

madebymike.com.au


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.

github.io

Our Sponsor

A CMS for front-end developers

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.

grabaperch.com

Newsletter