如何防止 Tailwind CSS 网格布局中列跨度为 2 的 div 与跨度为 1 的相邻列重叠？

Question

我有一个包含 3 列网格的 div (grid-cols-3)，然后有两个子 div：一个列跨度为 2 (col-span-2)，另一个列跨度为 1 (列-跨度-1)。我想修复列跨度为 2 的 div。问题是，当我使用position:fixed 时，它使用窗口的宽度和高度，以跨度 1 覆盖列

这是我正在使用的代码，你能帮我修复它吗？

div className="h-full">
        <div className="grid grid-cols-3 w-full h-full">
          <div className="   col-span-2 h-full w-full top-0 overflow-y-hidden">
            <div className="w-full h-full bg-black text-white">ghhh</div>
          </div>
          
            <div
              id="content-wraper"
              className="col-span-1 bg-white h-full w-full   "
            ></div></div>

Answer 1

您可以考虑在网格布局中使用参考元素，然后使用该参考元素调整

position: fixed

元素的大小。代码中的

className

属性暗示您正在使用 React，因此这里是 React 中的实现：

const { useRef, useState, useLayoutEffect } = React;

function App() {
  const ref = useRef(null);
  const [style, setStyle] = useState({});
  
  useLayoutEffect(() => {
    const observer = new ResizeObserver(([entry]) => {
      setStyle({
        top: entry.contentRect.top,
        left: entry.contentRect.left,
        height: entry.contentRect.height,
        width: entry.contentRect.width,
      });
    });
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);
  
  return (
    <div className="h-full">
      <div className="grid grid-cols-3 w-full h-full">
        <div className="col-span-2 h-full w-full" ref={ref} />
        <div className="overflow-y-hidden fixed" style={style}>
          <div className="w-full h-full bg-black text-white">ghhh</div>
        </div>

        <div
          id="content-wraper"
          className="col-span-1 bg-white h-full w-full"
        />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app" class="h-96"></div>

<div class="h-screen"></div>

连接参考元件：

const ref = useRef(null);
…
<div className="grid grid-cols-3 w-full h-full">
  <div className="col-span-2 h-full w-full" ref={ref} />

在“真实”元素上设置

position: fixed

：

<div className="overflow-y-hidden fixed">
  <div className="w-full h-full bg-black text-white">ghhh</div>
</div>

观察参考元素的位置和大小：

const [style, setStyle] = useState({});
      
useLayoutEffect(() => {
  const observer = new ResizeObserver(([entry]) => {
    setStyle({
      top: entry.contentRect.top,
      left: entry.contentRect.left,
      height: entry.contentRect.height,
      width: entry.contentRect.width,
    });
  });
  observer.observe(ref.current);
  return () => observer.disconnect();
}, []);

将位置和大小数据应用到我们的真实元素：

<div className="overflow-y-hidden fixed" style={style}>