Andrew Beeken
Posted on December 2, 2019
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!
Posted on December 2, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.