Download the templates
PSD · PNG · CSS · free · no sign-up
Built by Sebastian Wiercinski in 2016 and unchanged since. If they saved you time, buy me a coffee.
How to use a grid system
A grid is four numbers: canvas width, column count, gutter and outer margin. Everything else follows from them.
1. Pick the canvas, not the monitor
Design at 1440. It is Figma's default desktop frame, it fits a 1600px display, and it is wide enough that layout problems surface while they are still cheap to fix. Your CSS will use fractions anyway — the canvas is a drawing convention, not a breakpoint. Why 1440 and not 1512 or 1920 →
2. Choose the column count from how you divide
12 divides by 2, 3, 4 and 6, which is why it became the default: halves, thirds, quarters and sixths all land on grid lines. 8 gives wider, calmer columns for editorial work. 9 is the specialist — clean thirds without 12's density. The full 8 vs 9 vs 12 comparison →
3. Set the gutter before the column width
The gutter is the decision; the column width is the consequence. 24–32px on desktop, 16–24px on mobile. Then column width = (canvas − 2 × margin − gutter × (columns − 1)) ÷ columns. On a 1440 canvas with 12 columns and a 30px gutter, that is 92.5px.
4. Keep the grid fluid in code
Do not translate 92.5px into your CSS. Use repeat(12, minmax(0, 1fr)) with the same gutter and the browser reproduces the proportions at every width. The pixel value exists so your design file and your build agree, not so you can hard-code it.
5. Change the column count at breakpoints, not the system
12 columns on desktop, 8 on tablet, 4 on mobile — same gutter logic, same alignment discipline. See breakpoints across 10 frameworks for where the field puts those switches.
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 30px;
max-width: 1440px;
margin-inline: auto;
padding-inline: 24px;
}
/* Children span columns, they don't get widths */
.hero { grid-column: span 12; }
.feature { grid-column: span 8; }
.aside { grid-column: span 4; }
/* Fewer columns as the viewport narrows */
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px; }
.feature, .aside { grid-column: span 8; }
}
@media (max-width: 640px) {
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}Column width at a glance
| Columns | 20px | 24px | 30px | 40px |
|---|---|---|---|---|
| 4 | 345 | 342 | 337.5 | 330 |
| 6 | 223.33 | 220 | 215 | 206.67 |
| 8 | 162.5 | 159 | 153.75 | 145 |
| 9 | 142.22 | 138.67 | 133.33 | 124.44 |
| 12 | 101.67 | 98 | 92.5 | 83.33 |
| 16 | 71.25 | 67.5 | 61.88 | 52.5 |
Highlighted row is the 12-column default. Full grid reference →
Grid generator
Any canvas, any column count. Outputs the exact column width plus ready-to-paste CSS Grid, Tailwind config and Figma layout-grid values.
Beyond the grid
Reference tables for every screen size, breakpoint and asset dimension.
Questions
What is the 1440px grid system?
A set of layout templates built on a 1440-pixel canvas, in 8-, 9- and 12-column variants, supplied as PSD, PNG and CSS. 1440 divides cleanly by 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 16, 18, 20 and 24, which is what makes it comfortable to subdivide however a layout demands.
Should I use 8, 9 or 12 columns?
12 unless you have a reason not to — it divides by 2, 3, 4 and 6, so halves, thirds, quarters and sixths all land on the grid. 8 suits editorial layouts with fewer, wider content columns. 9 exists for layouts that need clean thirds without the density of 12.
Why 1440px and not 960 or 1200?
960 and 1200 were sized for the monitors of their era. 1440 still fits inside a 1600-pixel display, matches the default scaled resolution of a 13-inch MacBook Air, and is the width Figma ships as its default desktop frame. Wide enough to expose real layout problems, narrow enough to stay a comfortable canvas.
Are the downloads still free?
Yes. Same files, same URLs, no email, no sign-up. They have been at those addresses since 2016 and they are staying there.
Do I still need a PSD grid template?
If you work in Figma, no — layout grids cover it natively, and the generator above outputs the exact values to paste in. The PSD files remain here for Photoshop work, and because a lot of articles still link to them.
What else is on this site?
Reference data for the numbers you look up mid-layout: screen sizes for 242 devices, breakpoints for 10 CSS frameworks, aspect ratios, CSS unit conversion, social image sizes and print dimensions.