Fashion flexible layouts with CSS Grid

A woman sits at a laptop tweaking a CSS Grid layout

CSS Grid is perfect for creating two-axis layouts of rows and columns. The syntax is simple and makes page layout a breeze. Layouts that would have required multiple nested containers can now be simply described in CSS.

Grid works differently to other layout properties, since applying the ‘grid’ value to the ‘display’ property will affect any direct children. These elements are now grid items and will be positioned according to the rules you set on the parent (unless being specially placed).

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Steven Roberts

Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.