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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay