DEV Community

Brandon Weaver
Brandon Weaver

Posted on

Dynamic Containers with CSS and JavaScript

There are endless ways to arrange content and create pixel-perfect designs using CSS and JavaScript. Depending on what you want to achieve aesthetically, you can often create impressive layouts using only CSS, however, there are times when JavaScript is necessary.

I typically rely on a combination of flex, margin, padding, and the CSS calc function to determine the width, height, and spacing of each element.

Below is a demonstration I created which uses this approach.

Something worth pointing out is the use of vh; this unit represents the view height percentage of the window. I use calc(100vh - 90px) since I want the container to fill the remaining space of the window. I subtract 90 pixel units from 100% of the view height since that is the total height of the other elements including margins and padding. You can use a similar approach to determine the width and height of elements in a container while accounting for margins and padding.

Retry later

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more