Do not contact me on this acc Posts

Do not contact me on this acc

•Created by Do not contact me on this acc on 12/24/2023 in #front-end

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)' : '',
  };

10 replies

Gaming

Programming