如何使用 CSS Grid/JavaScript 根據其他 div 寬度設置 div 寬度？

Question

我仍然是編程的初學者，我對 CSS Grid 的經驗很少。

我需要渲染一個分成兩列的組件。 左列的寬度為minmax(570px, 720px) 。 右列的寬度為minmax(380px, 100vw) 。

問題是左列永遠不會改變它的最小寬度 570px。

我需要左欄為 720 像素，直到屏幕為 1440 像素。 當屏幕小於 1440px 時，左列開始逐漸減小，直到達到 570px。

你能告訴我我該怎么做嗎？

這是我放入codesandbox.io的代碼

我希望我能夠很好地解釋我需要解決的問題。

 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;

非常感謝您的幫助

Answer 1

嘗試查看最大寬度、最小寬度屬性。

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

因為您希望 div 以精確的 px id 移動，所以在 JS 中使用 if-else 條件