As a beginner in programming, I'm trying to work with CSS Grid but facing some challenges.
My goal is to create a component with two columns: the left column should have a width of minmax(570px, 720px), and the right column should be minmax(380px, 100vw).
The issue I'm encountering is that the left column's minimum width remains fixed at 570px.
I would like the left column to start at 720px and gradually decrease if the screen size is less than 1440px until it reaches 570px.
If anyone knows how I can achieve this, I would greatly appreciate your guidance.
You can find my code on codesandbox.io
I hope I've explained the problem clearly and look forward to any assistance.
https://i.sstatic.net/FpQb8.png
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;Any help or suggestions are much appreciated. Thank you!