how to render the list to a grid in react?

Question

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.