如何在响应中将列表呈现给网格？

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>`

但它不能正常渲染。它呈现为这样的视图呈现

有人能帮我在我定义的网格中正确地呈现这些数据吗？我其实不想用桌子。这就是我使用网格的原因。

Answer 1

您需要将包含表体的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>

类是正确实现的；现在只需使用map.迭代条目，我刚刚添加了三个div，而不是map，因为我没有submissions数组。