Next.js Discord

Discord Forum

Creating a grid-like table (advice and ways to start)

Answered
Odorous house ant posted this in #help-forum
Open in Discord
Odorous house antOP
I'm trying to create a table-like grid that can give me the following sort of look:
[empty]  1  2  [empty]
3  [empty]  [empty]  4
[empty]  5  6  [empty]


except I have run into a big issue. The first thing I turned to, MUI's reactgrid, but that was a struggle that resulted in no success. I'm now just really confused on what I can use to do this.
Answered by Jboncz
<!DOCTYPE html>
<html>

<head>
  <title>Grid Layout</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 10px;
    }

    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }

    .item1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    .item2 {
      grid-area: 1 / 2 / 2 / 3;
    }

    .item3 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .item4 {
      grid-area: 2 / 4 / 3 / 5;
    }

    .item5 {
      grid-area: 3 / 2 / 4 / 3;
    }

    .item6 {
      grid-area: 3 / 3 / 4 / 4;
    }

  </style>
</head>

<body>
  <div class="grid-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>
</body>

</html>
View full answer

7 Replies

@Turkish Van Have You considered just using the pure CSS to create Your wanted grid layout? Or just by using Tailwind classes for grid layout, in case You are using Tailwind CSS for Your project?
Odorous house antOP
I have never actually used tailwind before so I did not think to use it here but I have a kind of solution here being:
<main className={styles.main}>
      <div className={styles.grid}>        
        <p></p>
        <p className={styles.center}> 1 </p>
        <p className={styles.center}> 2 </p>
        <p></p>
      </div>
      <div className={styles.grid}>
        <p className={styles.center}> 3 </p>
        <p></p>
        <p></p>
        <p className={styles.center}> 4 </p>
      </div>
      <div className={styles.grid}>
        <p></p>
        <p className={styles.center}> 5 </p>
        <p className={styles.center}> 6 </p>
        <p></p>
      </div>
    </main>

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(25%, auto));
  max-width: 100%;
  width: var(--max-width);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 4rem 0;
}


Though, I would like to know if there is any better way you would suggest here
Jboncz
<!DOCTYPE html>
<html>

<head>
  <title>Grid Layout</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 10px;
    }

    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }

    .item1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    .item2 {
      grid-area: 1 / 2 / 2 / 3;
    }

    .item3 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .item4 {
      grid-area: 2 / 4 / 3 / 5;
    }

    .item5 {
      grid-area: 3 / 2 / 4 / 3;
    }

    .item6 {
      grid-area: 3 / 3 / 4 / 4;
    }

  </style>
</head>

<body>
  <div class="grid-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>
</body>

</html>
Answer
Jboncz
Im obviously over simplifying it, but does this help?
@Jboncz Im obviously over simplifying it, but does this help?
Odorous house antOP
Yes, i didnt know about the grid-area attribute. Thanks!
Jboncz
No problem 🙂
Make sure to mark the answer please so the thread closes