A letter “g” designed based on a 4 x 6 square grid.

Creative type design with CSS grids

How to make a typography concept work for scalable icons

CSS grids can be complex screen layout options, allowing us to organize content and build hierarchies.

CSS grids are exceptional creative tools that lend structure when designing for responsive screens.

For instance, a screen layout that features typography as one of its main element benefits from a grid structure.

Letter design based on individual grid squares

In this example, we’ll build the letter ‘g’ in 3 steps:

1. In HTML, we build foundation grid, based on a 4x6 structure, building out the grid with 24 divs, yielding 24 individual squares.
2. We then eliminate the squares we don’t need in the letter design in CSS:

/* CSS */
.element2:nth-child(6), .element2:nth-child(8), .element2:nth-child(12), .element2:nth-child(13), .element2:nth-child(14), .element2:nth-child(18), .element2:nth-child(19), .element2:nth-child(21), .element2:nth-child(24) {
  background-color: white;
  border: none;
}