Introduction to compound CSS grids.

Mukudzei Makepeace Mangena — Mon, 15 May 2023 08:30:15 +0000

Introduction

Grids are a system for organizing and aligning content layouts on a page. Grids originated in print design. Now they are used in web design.

In this article, the reader will learn about common grid types and how to create compound grids and their benefits.

Responsive web design is complex, and user attention is limited. Grids help solve these problems. Compound grids can be a powerful tool for creating responsive and accessible websites.

A brief look at grids.
What is a compound grid?
How to create a compound grid?
Benefits of compound grids.
Example of a compound grid.
Conclusion.
Further reading.

A brief look at grids.

Grids have several parts: (1) Margin. (2) Content. (3) Spatial zones. (4) Rows. (5) Columns, and (6) Gutters.

Anatomy of a grid layout

Most web designers use traditional 12 or 16-column grids. There are four common grid types: column, modular, hierarchical, and manuscript grids. Each grid type has a different purpose.

What is a compound grid?

Compound grids are a combination of two or more grids combined into a single grid layout.

Grids are laid on top of each other to form a compound grid. Columns for each grid type should be the same size. Gutters must be equal size.

See the example of a 2-column + 3-column grid below. The resulting grid is a 6-column compound grid.

You can use equally sized columns and rows to create a consistent layout.

The interplay between two or more grids produces a rhythmic pattern. The pattern alters the visual aspect and mental model of using grids. For example:
2 + 3 columns result in pattern 2 1 1 2.
3 + 4 columns result in pattern 3 1 2 2 1 3.
4 + 5 columns result in pattern 6 1 4 3 3 4 1 6.
and so on.

The pattern represents each column's proportion in relation to the total available space excluding column gutters.

Example of a compound CSS grid.

Below is a real-world example of a desktop user interface created using a compound CSS grid. If you look closely, you can see six columns that form a 3 1 2 2 1 3 layout pattern.

Example of a 3 1 2 2 1 grid layout pattern

The pattern layout is ideal for wide screens. The body element is wrapped inside a media query and is the target element for the CSS grid layout. This help to switch between wide and narrow screens. The fractional unit fr simplifies creating CSS compound grid layouts.

For narrow screens, the body element is a flex-box container.

Benefits of compound grids.

Compound grids combine multiple grid types into a single design layout. They provide a flexible design with a clear hierarchy. This results in an accessible and easy-to-use web page.

Compound grids give you much control over the layout, which makes your design decision-making process fast. With compound grids, you can design complex responsive layouts that adapt to different screen sizes and browsers.

Conclusion

As we have seen in this article, compound grids can be a powerful tool for creating responsive and accessible websites and applications.

DEV Community: Mukudzei Makepeace Mangena