CSS Only Custom Elements: Responsive Layouts

This guide shows you how to build responsive layouts using only CSS custom elements (also known as custom properties or CSS variables) — no JavaScript required. You’ll learn how to define reusable design tokens, create fluid spacing and typography, and adapt your layout to different screen sizes with minimal code. This approach keeps your stylesheets DRY, makes theming effortless, and ensures your layouts respond smoothly to any viewport.

What You’ll Need

A text editor (VS Code, Sublime Text, or any editor you prefer)
A modern web browser (Chrome, Firefox, Safari, or Edge) to test your layout
Basic familiarity with HTML and CSS (selectors, properties, media queries)

Step-by-Step

Set up your HTML structure. Create a simple page with a header, main content area, and footer. Use semantic tags like <header>, <main>, and <footer>. Inside the main, add a few content blocks (e.g., cards or sections) that you want to arrange responsively.
Define custom properties in :root. Open your CSS file and start by defining global custom properties for colors, spacing, and font sizes. For example:
```
:root {
  --color-primary: #3498db;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
}
```
These variables act as your design tokens. You can reference them anywhere in your CSS using var(--variable-name).
Create a responsive spacing scale. To make spacing fluid, you can use clamp() with custom properties. For example, define a variable that scales with viewport width:
```
:root {
  --spacing-responsive: clamp(1rem, 3vw, 2rem);
}
```
This will give you a minimum of 1rem, a preferred value of 3% of viewport width, and a maximum of 2rem. Use this variable for margins and paddings.
Build a responsive grid using custom properties. Instead of hardcoding grid columns in media queries, define a variable for the number of columns and adjust it in a media query. For example:
```
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
  gap: var(--spacing-responsive);
}

@media (min-width: 768px) {
  :root {
    --grid-cols: 3;
  }
}
```
The default is 1 column, and at 768px it becomes 3 columns. You can change the breakpoint and column count to suit your design.

Make typography responsive. Use custom properties for font sizes and adjust them with clamp() or media queries. For instance:

:root {
  --font-size-h1: clamp(1.5rem, 4vw, 2.5rem);
  --font-size-body: clamp(0.9rem, 2vw, 1.1rem);
}

h1 { font-size: var(--font-size-h1); }
body { font-size: var(--font-size-body); }

This ensures text scales smoothly across devices.

Create a responsive flex layout for navigation. Use custom properties to control the direction and spacing of a flex container. For example:

.nav {
  display: flex;
  flex-direction: var(--nav-direction, row);
  justify-content: space-between;
  gap: var(--spacing-sm);
}

@media (max-width: 600px) {
  :root {
    --nav-direction: column;
  }
}

The navigation stacks vertically on small screens.

Use custom properties for theming. Define a set of color variables and override them in a data-theme attribute or a media query for dark mode. For example:
```
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222222;
    --text-color: #f0f0f0;
  }
}
```
Apply these variables to your body: background: var(--bg-color); color: var(--text-color);
Test your layout. Open your HTML file in a browser, use the developer tools (F12) to toggle device emulation, and check how the layout behaves at different widths. Adjust your breakpoints and variable values as needed.

Common Mistakes

Overusing media queries. Custom properties are meant to reduce the need for media queries, but some developers still hardcode values inside them, defeating the purpose. Use variables to centralize changes.
Not providing fallbacks. If you use var() without a fallback and the variable is undefined, the property becomes invalid. Always provide a fallback value, e.g., var(--spacing, 1rem).
Ignoring the cascade. Custom properties inherit and can be overridden. If you set a variable on a parent, it affects all children. Be mindful of where you define them to avoid unexpected results.
Using clamp() incorrectly. The order is minimum, preferred, maximum. Swapping these can break your layout. Also, ensure the preferred value is between the min and max.

Tips

Name variables semantically. Use names like --spacing-md instead of --space-1 to make your code more readable.
Group related variables. Keep all your custom properties in the :root block at the top of your stylesheet for easy maintenance.
Use clamp() for fluid typography. It’s the easiest way to make text scale smoothly without multiple media queries.
Combine with CSS Grid’s auto-fit and minmax(). For example, grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates a responsive grid without any media queries. You can store the minmax value in a variable.
Test with real content. Ensure your layout works with longer text, images, and other elements, not just placeholder content.

Troubleshooting

My layout doesn’t change at breakpoints. Check that your media query is targeting the correct element. If you define variables on :root inside a media query, they override the earlier definitions. Make sure the media query is placed after the initial definitions in your CSS.

The custom property isn’t working. Verify the variable name is spelled exactly the same everywhere. Remember that custom properties are case-sensitive. Also, ensure you’re using var() correctly, e.g., var(--my-var) not var(--my-var,).

My grid has unexpected gaps. If you’re using gap, make sure the browser supports it (all modern browsers do). Check that the gap value is not too large; adjust the variable.

Text is too small or too large. If you’re using clamp(), ensure the min and max values are appropriate. Test on actual devices, not just the dev tools emulation.

The layout looks fine in desktop but broken on mobile. Use the browser’s responsive mode to inspect. Often, the issue is a fixed width or missing viewport meta tag. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to your HTML head.

Frequently Asked Questions

What is a CSS custom element?

In this context, a custom element refers to a CSS custom property (a variable). It’s not the same as a custom HTML element. Custom properties store values that you can reuse throughout your stylesheet.

Can I use custom properties with any CSS property?

Yes, custom properties can be used as the value of any CSS property, as long as the value is valid for that property. For example, color: var(--my-color) works if --my-color is a valid color.

Do custom properties work in all browsers?

Custom properties are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. They are not supported in older versions of Internet Explorer, but that’s rarely a concern today.

How do I change a custom property dynamically?

You can change a custom property by targeting an element and setting a new value. For example, in a media query, you can redefine the variable. You can also use JavaScript to set it, but this guide focuses on CSS-only methods.

What’s the difference between `clamp()` and media queries?

clamp() allows a value to fluidly scale between a min and max based on the viewport, while media queries apply styles only at specific breakpoints. They can be used together; clamp() reduces the need for many media queries.

Can I use custom properties with CSS Grid?

Absolutely. Custom properties are perfect for grid layouts. You can define the number of columns, gap sizes, and even track sizes as variables, making your grid highly flexible.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →