CSS Calc for Dynamic Sizing

Use CSS calc function for dynamic sizing combining units and custom properties for flexible layout calculations.

CssConfig ManagementUpdated: 2025-01-15

Code

:root { --sidebar: 240px; --gap: 16px; }

.main {
  width: calc(100% - var(--sidebar) - var(--gap));
  margin-left: calc(var(--sidebar) + var(--gap));
}

.full-height {
  height: calc(100vh - 60px);
}

Related Examples

CSS Backdrop Filter Glass Effect
CSS Clip Path Shapes
CSS Color Mix Function
CSS Container Queries
CSS Custom Scrollbar Styling

Report a problem with this exampleOpens a pre-filled issue on GitHub.