Shape
Grid Systems
A shared structure of columns, margins and spacing that keeps layouts consistent.
What is Grid Systems?
A shared structure of columns, margins and spacing that keeps layouts consistent.
What you learn
Use a grid for consistency, and let content span it when needed.
When it helps
layouts lack alignment, or every page uses different spacing.
Use it at work
- Choose columns, margins and gaps that suit your content.
- Place elements on the grid lines.
- Let wide content span several columns.
- Define how the grid changes on smaller screens.
Your output
Find something on one of your screens that the grid squeezes. Let it span more columns instead of shrinking it.
Watch for
Forcing content into one column to obey the grid, or ignoring the grid.
Related practices
Sources
Enable JavaScript to try the interactive activity.