Css网格不能在下一行显示数据

我刚刚开始使用网格，在Reaction上制作表格组件。传递头部标题和数据作为道具。我将repeat(auto-fit, minmax(10px, 1fr));设置为适合同一行中的所有标题。现在，当我呈现数据时，它不会转到下一行，所有这些都在一行中。如何解决这个问题？您可以在这里勾选https://codesandbox.io/s/goofy-easley-w5rrg

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid black;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  justify-items: center;
  grid-gap: 5px;
  padding: 5px;
`;

const Table = ({ columns, children, titles,data }) => {
  const [collapseElements, setCollapse] = useState({});

  const displayData=(data)=>{
    for (let i = 0; i < data.length; i++) {
      return Object.keys(data[i]).map((value,ids)=>{
        return <span key={ids}>{data[i][value]} </span>
     })

    }

  }
  const displayTitles = titles => {

    return titles.map((title, idx) => {
      return <span key={idx}>{title}</span>;
    });
  };

  return (

    <TableWrapperUI columns={columns}>{displayTitles(titles)} {displayData(data)}</TableWrapperUI>


  );
};

---

解决方案

您可以使用TABLE标记来正确格式化数据。

import React, { Fragment, useState } from "react";
import styled, { css } from "styled-components";

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid black;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  justify-items: center;
  grid-gap: 5px;
  padding: 5px;
`;

const Table = ({ columns, children, titles, data }) => {
  const [collapseElements, setCollapse] = useState({});

  const displayData = data => {
    for (let i = 0; i < data.length; i++) {
      return Object.keys(data[i]).map((value, ids) => {
        return <td key={ids}>{data[i][value]} </td>;
      });
    }
  };
  const displayTitles = titles => {
    return titles.map((title, idx) => {
      return <th key={idx}>{title}</th>;
    });
  };

  return (
    <>
      <TableWrapperUI columns={columns}>
        <table>
          <thead>
            <tr>{displayTitles(titles)}</tr>
          </thead>
          <tbody>
            <tr>{displayData(data)}</tr>
          </tbody>
        </table>
      </TableWrapperUI>
    </>
  );
};
export default Table;