如何在反应中将列表渲染到网格？

Question

我想将少量数据渲染到我的网格布局中。我试图像这样渲染它们。

`<div className="grid grid-cols-4 mt-4 mx-6 mb-2">
              <div className="col-span-2 uppercase font-bold">name</div>
              <div className="uppercase font-bold mx-auto">deadline</div>
              <div className="uppercase font-bold mx-auto">time</div>
            </div>
            <div className="grid grid-cols-4 mx-6 overflow-y-auto h-[6rem] ">
              {submissions.submissions.length > 0
                ? submissions.submissions.map((submission) => (
                    <div className="flex flex-col">
                      <div className="flex gap-2 items-center col-span-2">
                        <img src={submit} alt="submit" className="h-3   " />
                        <p className="capitalize mt-2">{submission.caption}</p>
                      </div>
                      <div className="mx-auto mt-2">
                        {submission.deadlineDate}
                      </div>
                      <div className="mx-auto mt-2">
                        {submission.deadlineTime}
                      </div>
                    </div>
                  ))
                : null}
            </div>`

但它无法正确呈现。它呈现这样 view render

任何人都可以帮助我在我定义的网格中正确呈现这些数据。我实际上不想使用 table。这就是我使用网格的原因。

Answer 1

您需要将包含 table 主体的 div 的 grid-cols-4 替换为 grid-rows-4，并删除一些不必要的 flex。

此处显示了更正后的代码，

<div className="grid grid-cols-4 mt-4 mx-6 mb-2">
              <div className="col-span-2 uppercase font-bold">name</div>
              <div className="uppercase font-bold mx-auto">deadline</div>
              <div className="uppercase font-bold mx-auto">time</div>
            </div>
            <div className="grid grid-rows-4 mx-6 overflow-y-auto h-[6rem] ">
              
                    <div className="grid grid-cols-4  ">
                      <div className="flex col-span-2 gap-2 items-center ">
                        <img src="img_1.jpg" alt="submit" className="h-3   " />
                        <p className="capitalize mt-2 ">submission.caption</p>
                      </div>
                      <div className="mx-auto mt-2">
                        submission.deadlineDate
                      </div>
                      <div className="mx-auto mt-2">
                        submission.deadlineTime
                      </div>
                    </div>

                    <div className="grid grid-cols-4  ">
                      <div className="flex col-span-2 gap-2 items-center ">
                        <img src="img_1.jpg" alt="submit" className="h-3   " />
                        <p className="capitalize mt-2 ">submission.caption</p>
                      </div>
                      <div className="mx-auto mt-2">
                        submission.deadlineDate
                      </div>
                      <div className="mx-auto mt-2">
                        submission.deadlineTime
                      </div>
                    </div>

                    <div className="grid grid-cols-4  ">
                      <div className="flex col-span-2 gap-2 items-center ">
                        <img src="img_1.jpg" alt="submit" className="h-3   " />
                        <p className="capitalize mt-2 ">submission.caption</p>
                      </div>
                      <div className="mx-auto mt-2">
                        submission.deadlineDate
                      </div>
                      <div className="mx-auto mt-2">
                        submission.deadlineTime
                      </div>
                    </div>

                    
                  
            </div>
        </div>

The classes are correctly implemented; you can simply now iterate the item using map. I had just added three divs instead of map as I don't have submissions array.

如何在反应中将列表渲染到网格？

how to render the list to a grid in react?

css

reactjs

tailwind-css