So I have this Vuejs application that has three divs using CSS grid: a sidebar, a config panel, and a preview. I want to dynamically set the width of the preview div in pixels based on the current screen size and when the screen is resized.
To give a better idea, I created a gif of a website that demonstrates exactly what I am trying to achieve: https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a
As shown in the gif, every time the screen is resized, a new class is assigned to the specific <div>, and the width of the div is updated with a new pixel value automatically.
Initially, I attempted to achieve this in the created() hook:
window.addEventListener("resize", () => {
let preview = window.document.querySelector(".preview");
preview.style.width = `${preview.offsetWidth}px`;
});
However, this approach did not work.
I have created a simple sample project in a CodeSandbox here.
Ideally, I am looking for a way to dynamically set the width in pixels similar to the website in the gif.
Additionally, I am curious about why and how that particular website generates a new class each time the screen is resized (I have noticed this happening a few times and I am intrigued by it).