DEV Community

Andrew Beeken
Andrew Beeken

Posted on

1 1

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay