如何将空元素添加到网格中以使其充满？答案

【问题标题】：How can I add empty elements into a grid to make it full?如何将空元素添加到网格中以使其充满？
【发布时间】：2023-02-07 01:37:00
【问题描述】：

我有一个应用程序可以获取员工数据并显示他们在公司大楼内的出勤情况。

每个员工都分配了一张卡片，所有员工都显示在一个网格中。我想做两件事：

给整个网格一个背景，这样如果没有足够的员工来填充网格，它就会是灰色的
通过卡片之间的间隙或边框，在每张卡片之间添加一条白线

我怎么做？

如果我将背景颜色应用到网格，则卡片的间距不适用（因为没有卡片）。

如果我尝试通过后元素添加另一张卡片，只会出现一个小的、单一的“卡片式”元素，这不足以填满整个空间。

//CardGrid.tsx
import React from "react";
import Card from "./Card";
import { CardGridType } from "../types/componentTypes";
import { UserDataType } from "../types/general";

const CardGrid: React.FC<CardGridType> = ({ data }) => {
  return (
    <div className="m-4 grid grid-cols-2 overflow-hidden rounded shadow-lg sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-8">
      {data.map((d: UserDataType) => (
        <Card data={d} key={d.cas} />
      ))}
    </div>
  );
};

export default CardGrid;

//Card.tsx
import React from "react";
import { UserDataType } from "../types/general";

const Card: React.FC<{ data: UserDataType }> = ({ data }) => {
  const { jmeno, prijmeni, pritomny } = data;

  const cardClass =
    "py-8 px-8 text-center text-xl text-white " +
    (pritomny ? "bg-emerald-600" : "bg-gray-400");
  return (
    <div className={cardClass}>
      <p className="card-text">
        {jmeno} {prijmeni}
      </p>
    </div>
  );
};

export default Card;

如果您对如何解决问题有任何想法，请分享您的建议。

【问题讨论】：

标签： javascript css reactjs typescript tailwind-css

【解决方案1】：

对于问题1，您可以为CardGrid 组件本身添加背景色，并将宽度和高度设置为100%。

对于问题 2，您可以将边框添加到具有所需宽度和颜色的 Card 组件。要在卡片之间添加空间，您可以向 CardGrid 组件添加一些填充。

这是 CardGrid.tsx 和 Card.tsx 的更新代码：

// CardGrid.tsx
import React from "react";
import Card from "./Card";
import { CardGridType } from "../types/componentTypes";
import { UserDataType } from "../types/General";

const CardGrid: React.FC<CardGridType> = ({ data }) => {
  return (
    <div className="m-4 grid grid-cols-2 overflow-hidden rounded shadow-lg sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-8 bg-gray-200" style={{ width: "100%", height: "100%" }}>
      {data.map((d: UserDataType) => (
        <Card data={d} key={d.cas} />
      ))}
    </div>
  );
};

export default CardGrid;

// Card.tsx
import React from "react";
import { UserDataType } from "../types/General";

const Card: React.FC<{ data: UserDataType }> = ({ data }) => {
  const { jmeno, prijmeni, pritomny } = data;

  const cardClass =
    "py-8 px-8 text-center text-xl text-white " +
    (pritomny ? "bg-emerald-600" : "bg-gray-400");
  return (
    <div className={cardClass} style={{ border: "1px solid white" }}>
      <p className="card-text">
        {jmeno} {prijmeni}
      </p>
    </div>
  );
};

export default Card;

【讨论】：