Kevin Powell - Community•2mo ago

Grid system

Anyone know if this is possible? I want to make a grid system. Now it is not possible to get them right. Photo 1 is what it currently looks like, but it. should be like photo 2. So everything should fit together This is my css

 .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 6px;
    overflow: hidden;
}
.grid .col-grid-6 { 
    grid-column: span 6;
    height: max-content;
}

 .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 6px;
    overflow: hidden;
}
.grid .col-grid-6 { 
    grid-column: span 6;
    height: max-content;
}

This is my html

<div class="grid">
  <div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
</div>

<div class="grid">
  <div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
</div>

Hopefully someone can help me?

7 Replies

Chris Bolson•2mo ago

To achieve the "masonry" design of the second image you will either have to create multiple grid rows and tell each box to extend across different numbers of rows or, possibly simpler, use columns rather than grid on the parent container.

Jochem•2mo ago

alternatively, in this specific case you can use flex if you don't mind the order being a little odd you can set the direction to column, and turn on flex wrap. Usually it's not good enough because it's going to order things like this:

1   4
2   5
3   6

1   4
2   5
3   6

while you usually want

1   2
3   4
5   6

1   2
3   4
5   6

but in this case I think you can just reorder the markup and not worry about it

Chris Bolson•2mo ago

I was trying to see how this might work but the realized that you must be suggesting applying the flex to the grid children elements, the ones that currently have the "col-grid-6" class. Is that right?

Jochem•2mo ago

I hadn't looked that far yet, I just know you can fake a masonry layout like that looking now, I'd put it on .grid well, rename it, but still

Chris Bolson•2mo ago

I would do this with columns, the downside being the ordering issue that you have mentioned, but that can probably be resolved in the markup.

.grid {
   columns :2;
   column-gap: 20px;
}
.grid > div {
  break-inside: avoid;
  /* other card styling */
}

.grid {
   columns :2;
   column-gap: 20px;
}
.grid > div {
  break-inside: avoid;
  /* other card styling */
}

Rianẍa•2mo ago

I gona try tomorow! thx guys thanks @Chris this works for the 2 columns but I would like to do something that the class .grid is The 'container'. And so I can determine how wide it is based on the other class .col-grid-6. So .col-grid-6 is 50% and for example .col-grid-4 is 33% so column 2 works if I always have 2 columns, but not if I want it differently

Chris Bolson•2mo ago

In that case you will probably have to define row heights and tell each "box" how many rows it should cover. It might be possible with flex 🤔 The idea of a masonry grid is something that is being discussed by the CSS developer people (not the correct term, I know). Kevin recently released a video regarding this topic https://www.youtube.com/watch?v=azs0xtt_tJc

Kevin Powell

YouTube

What would you call this layout?

Read the full artcile here 👉 https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/ and Chrome has put out an alternate proposal I didn't mention in the video, which has the opposite point of view: https://developer.chrome.com/blog/masonry 🔗 Links ✅ The full article: https://webkit.org/blog/15269/help-us-invent-mason...

Gaming

Programming

Grid system