9 replies

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

KP-C

Kevin Powell - Community•3y ago•

9 replies

electron

Formatting a grid

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

Formatting a grid

Similar Threads

Formatting a grid

Similar Threads

Similar Threads

Similar Threads