0

I have been trying to recreate the below picture in css but have been having trouble implementing it with both grids and flexboxes.

I want each of the boxes to simpy fit its content, and the remaining empty boxes to fill the space of the column.

When I try with grids I can easily create three columns with a fixed even gap inbetween columns and rows however I get stuck on how to make the individual boxes dynamic in size depending on its content.

When I try with flex boxes, I can create teh individual boxes of flexible size but it is very hard to limit the boxes to three columns of even size, but let the columns each have multiple elements.

I have thought about simply creating three different flex boxes but wanted to avoid a hardcoded solution, but maybe for this case this is the best solution?

Would I use grids or flexboxes for this kind of design?

Any insight on how to approach such a design would be very helpful thanks.

enter image description here

Jin
  • 23
  • 5

1 Answers1

0

What you could do is to create 3 different classes for each column in the grid: Each class should have align-self: flex-start as well as display: grid; in order to create space between different rows in the column. Here's the full code:

.base-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2rem;
  }
  .col-1 {
    display: grid;
    grid-gap: 2rem;
    grid-column: 1 / span 1;
  }
  .col-2 {
    display: grid;
    grid-gap: 2rem;
    grid-column: 2 / span 1;
    align-self: flex-start;
  }
  .col-3 {
    display: grid;
    grid-gap: 2rem;
    grid-column: 3 / span 1;
    align-self: flex-start;
  }

  .single-content {
    background-color: pink;
    padding: 2rem;
  }

here's an Imagesample Image

Abdulkarim
  • 11
  • 1
  • 2