CSS Grid homepage widget layout

abeeken

Andrew Beeken

Posted on December 2, 2019

CSS Grid homepage widget layout

Been playing about with CSS Grid; here's a little test of using it for a homepage layout!

This layout will allow you to create a flexible grid based widget layout that snaps down nicely to a mobile friendly stacked layout.

It takes advantage of the fact that CSS Grid can allow elements to flow naturally but also provides some colspan classes to allow content to be positioned easier.

If you wanted you could use media queries to specify different span rules for different resoutions, but this will be largely dependent on your content needs.

Using homapage block elements you can also add different styles to provide different coloured blocks for highlighting call to action areas.

Have fun!

💖 💪 🙅 🚩
abeeken
Andrew Beeken

Posted on December 2, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

CSS Grid homepage widget layout
codepen CSS Grid homepage widget layout

December 2, 2019