css网格无法在下一行显示数据答案

【问题标题】：css grid can't display data on next rowcss网格无法在下一行显示数据
【发布时间】：2019-11-15 03:59:58
【问题描述】：

我刚开始使用网格，在 React 上制作表格组件。将头像和数据作为道具传递。我将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>


  );
};

【问题讨论】：

标签： html css reactjs css-grid

【解决方案1】：

您可以使用表格标签来正确格式化数据。

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;

【讨论】：