How to set div width according other div width with CSS Grid/JavaScript?

user_19105436 0
Viewed 37

I'm still beginner to programming and I have little experience with CSS Grid.

I need to render a component that is split into two columns. The left column has a minmax(570px, 720px) width. The right column has a width of minmax(380px, 100vw).

The problem is that the left column never changes its minimum width of 570px.

I need the left column to be 720px until the screen is 1440px. When the screen is smaller than 1440px then the left column starts to decrease gradually, until it reaches 570px.

Can you tell me how I can do this?

Here's my code I put into codesandbox.io

I hope I managed to explain well the problem I need to solve.

enter image description here

import React from "react";

const App = () => {
  const ref1 = React.useRef(null);
  const ref2 = React.useRef(null);
  const [width1, setWidth1] = React.useState(0);
  const [width2, setWidth2] = React.useState(0);

  React.useEffect(() => {
    setWidth1(ref1.current.offsetWidth);

    const getwidth = () => {
      setWidth1(ref1.current.offsetWidth);
    };

    window.addEventListener("resize", getwidth);

    return () => window.removeEventListener("resize", getwidth);
  }, []);

  React.useEffect(() => {
    setWidth2(ref2.current.offsetWidth);

    const getwidth = () => {
      setWidth2(ref2.current.offsetWidth);
    };

    window.addEventListener("resize", getwidth);

    return () => window.removeEventListener("resize", getwidth);
  }, []);

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        maxWidth: "100%"
      }}
    >
      <div
        style={{
          height: "100vh"
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "row"
          }}
        >
          <div
            ref={ref1}
            style={{
              border: "1px solid blue",
              backgroundColor: "lightblue",
              display: "grid",
              gridTemplateColumns: "minmax(570px, 720px)",
              fontSize: "30px"
            }}
          >
            Left - {width1}
          </div>
          <div
            ref={ref2}
            style={{
              border: "1px solid red",
              backgroundColor: "lightcoral",
              display: "grid",
              gridTemplateColumns: "minmax(380px, 100vw)",
              fontSize: "30px"
            }}
          >
            Right - {width2}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

Thanks a lot for any help

flexbox css-grid css javascript
1 Answers

try looking into the max-width, min-width properties.

max-width:720px;
min-width:570px;

Because you want the div to move at an exact px id use an if-else conditions in JS

user_143800220
Related