CSS 网格 - 使项目可滚动，而不是缩小它们以适应

Question

我正在使用 CSS 网格，如果发生溢出，我希望元素能够垂直和水平滚动，因此它会“放大”。但是，元素会缩小自己以适应网格，并且它产生两个问题：

1. 元素超小
2. 方块的内容互相溢出

这是我的组件代码：

BoardContainer.tsx

import {FC, ReactElement, useState} from "react";

import Square from "@/components/board/Square";

const BoardContainer: FC = () => {
    const boardSquares: ReactElement[] = [];
    for (let i : number = 0; i < 2601; i++) {
        boardSquares.push(<Square key={i} i={i}/>);
    }

  return (
      <div className="board-container h-[92.5%] w-[60%] overflow-scroll">
        <div className="grid grid-cols-51 grid-rows-51">
          {boardSquares}
        </div>
    </div>
  );
};


export default BoardContainer;

Square.tsx:

import {ReactElement} from "react";

const Square = ({i} : {i: number}): ReactElement => {
    return (
    <div className={"flex justify-center border border-gray-200 aspect-square"}>
        {i}
        </div>
    )
}

export default Square;

Answer 1

默认情况下，Tailwind 中不存在

grid-cols-51

和

grid-rows-51

类。您可能有一些未能提供的自定义配置。无论如何，假设这些类应分别应用 51 个网格列轨道和行，请考虑将网格轨道大小设置为

auto

或

max-content

以避免任何收缩：

const { useState} = React;

const Square = ({i}) => {
  return (
    <div className={"flex justify-center border border-gray-200 aspect-square"}>
      {i}
    </div>
  )
}

const BoardContainer = () => {
  const boardSquares = [];
  for (let i : number = 0; i < 2601; i++) {
    boardSquares.push(<Square key={i} i={i}/>);
  }

  return (
    <div className="board-container h-[92.5%] w-[60%] overflow-scroll">
      <div className="grid grid-cols-[repeat(51,max-content)] grid-rows-[repeat(51,max-content)]">
        {boardSquares}
      </div>
    </div>
  );
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div id="app"></div>