DEV Community

Andrew Beeken
Andrew Beeken

Posted on

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!

Top comments (0)