Skip to content

Issue 150

Flexbox alignment, card components, grid layout, position: sticky

Rachel Andrew
2 min read


Issue 150

I only just realised this is issue 150, meaning that I have sent this email for 150 weeks now without missing a week. More amazingly, there have been enough CSS Layout related links to fill 150 issues. Good going CSS community!

I am back from Hong Kong and off to MC CSSDay in Amsterdam. I have never been an MC before, however it is essentially an event where all of my friends are talking about CSS, so I think it should be a good day.

Thanks once again to Smashing Conference for the sponsorship of the email this week. I'll be at the Toronto event at this end of this month, as conference season steamrollers on!

Rachel Andrew, CSS Layout News

Intent to ship: shape-outside - Google Groups

The shape-outside property of CSS Shapes has been in Firefox Nightly for some time, and should be shipping in regular Firefox 62 on August 21st.


A Comprehensive Guide to Flexbox Alignment

A refresher on the Box Alignment properties as they work in Flexbox by Anna Monus.

Easier scrollytelling with position sticky

An excellent article on position: sticky.

Unlocking the Power of CSS Grid Layout

Last week I spoke at with my talk Unlocking the Power of CSS Grid Layout. Slides and resources can be found here.

A Card Component

On Inclusive Components, a detailed explanation of how to create an accessible card component.


CodePenChallenge: Cards Roundup - CodePen Blog

On the subject of card layouts, here are some fun examples from the recent CodePen challenge.

Our Sponsor

Smashing Conference Toronto - June 26-27 #noslides

Smashing Conference Toronto - June 26-27 #noslides

What would be the best way to learn and improve your skills? By watching designers and developers over their shoulder! At SmashingConf Toronto (June 26–27), we'll do precisely that. All talks will be interactive design and coding sessions with speakers such as Dan Mall, Lea Verou, and Sara Soueidan where they show how to design and build things — including pattern libraries' setup, design workflows, debugging, naming conventions, and everything in between. Check all speakers →