The Future Of CSS

- Rachel Andrew

This is a very exciting time to be a web developer. We will take a look at some of the new CSS properties and entire specifications that are making their way into browsers. Some of these are behind flags or only available in beta versions of browsers now but you will be seeing them in release versions very soon.

Gutters for Flexbox

CSS Grid Layout introduced the grid column-gap, grid-row-gap and grid-gap properties. Multi-column layout already had column-gap. It therefore made sense to remove these properties from the Grid and Multicol specifications and place them into Box Alignment, the specification that deals with space distribution and alignment across all specifications. This meant the gap properties – now renamed column-gap, row-gap and gap for all contexts could be specified for other layout methods – such as Flexbox.

At the time of writing, Firefox is the only browser to have implemented these properties for Flexbox and they are expected to ship in Firefox 63 (which should be available by the time you read this). However I would expect other browsers to follow suit. This should mean that instead of having to use margins to create gutters between flex items, you’ll be able to use gaps as in grid layout.

.flex {

display: flex;

flex-wrap: wrap;

row-gap: 20px;

column-gap: 10px;

}

Logical properties and values