The beauty of CSS grids

Design your story in columns and rows

CSS grids are powerfully playful. With a few lines of style css and a number of html div tags, a CSS grid can easily implement an elegant responsive design to any screen layout, without it being difficult to grasp as a concept.

Grids have fascinated designers for centuries. And grids are here to stay. Applying a grid to a screen layout builds a solid foundation to the screen design structure.

A grid structure offers infinite variations, especially when considering columns, rows, and gap dimensions as the grid design building blocks

Sketching out a basic square grid with 9 components, we can quickly see how a screen design can benefit from a grid structure. As we define the number of columns, rows, their width and height, spans, gaps, backgrounds, and colors, many options take shape.

There are many variations even within a basic square 9-element grid.

In this article, I’m exploring some playful variations of a simple css grid structures, without delving too deeply into any of the the 3 coding examples. They are meant as inspiration and design exploration.

The CSS grid can match any of the grid design principles