title: how to render the list to a grid in react?
body: <p>I want to render few data into my grid layout. I tried to render them like this.</p>
  <pre><code>`&lt;div className=&quot;grid grid-cols-4 mt-4 mx-6 mb-2&quot;&gt;
                &lt;div className=&quot;col-span-2 uppercase font-bold&quot;&gt;name&lt;/div&gt;
                &lt;div className=&quot;uppercase font-bold mx-auto&quot;&gt;deadline&lt;/div&gt;
                &lt;div className=&quot;uppercase font-bold mx-auto&quot;&gt;time&lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;grid grid-cols-4 mx-6 overflow-y-auto h-[6rem] &quot;&gt;
                {submissions.submissions.length &gt; 0
                  ? submissions.submissions.map((submission) =&gt; (
                      &lt;div className=&quot;flex flex-col&quot;&gt;
                        &lt;div className=&quot;flex gap-2 items-center col-span-2&quot;&gt;
                          &lt;img src={submit} alt=&quot;submit&quot; className=&quot;h-3   &quot; /&gt;
                          &lt;p className=&quot;capitalize mt-2&quot;&gt;{submission.caption}&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div className=&quot;mx-auto mt-2&quot;&gt;
                          {submission.deadlineDate}
                        &lt;/div&gt;
                        &lt;div className=&quot;mx-auto mt-2&quot;&gt;
                          {submission.deadlineTime}
                        &lt;/div&gt;
                      &lt;/div&gt;
                    ))
                  : null}
              &lt;/div&gt;`
  </code></pre>
  <p>but it does not render properly. It renders like this
  <a href="https://i.stack.imgur.com/nAH0e.png" rel="nofollow noreferrer">view render</a></p>
  <p>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.</p>