Snippet: CSS Spacing (For Design System Template) To Help Create Consistency In Your Design

A spacing system can make life significantly easier when designing layouts for websites and apps. Here’s a snippet/boilerplate that can be added to a CSS file for using a 4-point grid. Copying and pasting this snippet can make it a bit quicker and easier when getting started with a new project.

Customise The Code

My naming of the custom properties is a bit janky so rename them how you want them and add/remove as many as you want. You could also change them all from ‘size’ to ‘space’ or similar semantic wording. There are two snippets, the first uses absolute units, the second uses rem.

Absolute Units

html {
    --size-xxs: 4px;
    --size-xs: 8px;
    --size-sm: 12px;
    --size-smd: 16px;
    --size-md: 20px;
    --size-mdml: 24px;
    --size-mdlg: 28px;
    --size-lg: 32px;
    --size-xl: 48px;
    --size-xxl: 64px;
    --size-xxxl: 80px;
}

Rem Values

html {
    --size-xxs: 0.25rem;
    --size-xs: 0.5rem;
    --size-sm: 0.75rem;
    --size-smd: 1rem;
    --size-md: 1.25rem;
    --size-mdml: 1.5rem;
    --size-mdlg: 1.75rem;
    --size-lg: 2rem;
    --size-xl: 3rem;
    --size-xxl: 4rem;
    --size-xxxl: 5rem;
}

Good luck with your project!