Kevin Powell - Community•12mo ago

Formatting a grid

Hi, I have this grid with a bunch of these course elements. Is there any way to remove the funky extra spacing behavior and make the "Venture" courses only span as many grid spaces as needed besides using flexbox and rendering a "grid" with multiple columns and uneven rows? This is the current code:

.parent {
  display: grid;
  gap: clamp(15px, 5vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  padding: 0 clamp(15px, 5vw, 20px) clamp(15px, 5vw, 20px);
}

.parent {
  display: grid;
  gap: clamp(15px, 5vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  padding: 0 clamp(15px, 5vw, 20px) clamp(15px, 5vw, 20px);
}

  const isVenture = course.tags?.filter((tag) => tag === 'Venture').length;

  const Style = {
    gridRow: `span ${course.courses?.match(/[A-Z][A-Z][A-Z][0-9][0-9][0-9]/gm)?.length ?? 1}`,
    backgroundColor: isVenture ? 'var(--reddish)' : '',
  };

  const isVenture = course.tags?.filter((tag) => tag === 'Venture').length;

  const Style = {
    gridRow: `span ${course.courses?.match(/[A-Z][A-Z][A-Z][0-9][0-9][0-9]/gm)?.length ?? 1}`,
    backgroundColor: isVenture ? 'var(--reddish)' : '',
  };

5 Replies

glutonium•12mo ago

r these the extra space u r talking about?? why is there an extra see more but no card

Rägnar O'ock•12mo ago

Not having access to the full thing to poke at it, it's hard to say for sure, but if what you are after is stacked cards of different lengths what you need to use is flexbox (or a masonry grid, but that's still not out yet) (next time try to provide a minimal reproduction of your issue in a codepen or similar)

MarkBoots•12mo ago

i imagine this data is added dynamically. You could use subgrid, and span each item over n-subitems + 1 rows something like this https://codepen.io/MarkBoots/pen/bGZNgmK

Mark Boots

CodePen

bGZNgmK

...

MarkBoots•12mo ago

@erich you posted a question here 5 days ago @erich if you want to keep my possible solution, you'll have to respond. I will remove the pen

Do not contact me on this accOP•12mo ago

I'm so sorry, I completely forgot about asking here. I looked through and that looks exactly what I needed. Thank you so much!

Gaming

Programming

Formatting a grid