how to render the list to a grid in react?-CodePudding

I want to render few data into my grid layout. I tried to render them like this.

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

but it does not render properly. It renders like this view render

can anyone help me to render these data properly inside my defined grid. I actually don't want to use a table. that is the reason why i am using a grid.

CodePudding user response：

You need to replace the grid-cols-4 to grid-rows-4 of the div containing the table body and also remove some unnecessary flex.

The corrected code is shown here,

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

CodePudding user response：

Why there is a flex-col ? It should be flex-row to display items in one line, because your header titles are also aligned in line

<div className="flex flex-col">