Kevin Powell - Community•3y ago

Grid flex?

I need to see if somebody could come up with a creative way to solve this >_< I have a feeling might have overlooked it after working for so long, so any bonk is appreciated. Any suggestion to make each grid-child to occupy the available space to match their siblings? Live preview is here: https://cozynova.online/windcutter/#Skills

Wind Cutter Guide

Comprehensive, concise and dynamic Ragnarok Online guide.

3 Replies

MarkBoots•3y ago

can't see an immediate solve. You can put a wrapper around your icons grid with the shadow and bgcolor on that

<div class="skill-priority-wrapper astro-LPFP2U5E">
  <div class="job-name-title astro-LPFP2U5E">...<div>
  <div class="skill-icons-wrapper shadow-container">
    <div class="skill-icons astro-LPFP2U5E">...</div>
  </div>
</div>

<div class="skill-priority-wrapper astro-LPFP2U5E">
  <div class="job-name-title astro-LPFP2U5E">...<div>
  <div class="skill-icons-wrapper shadow-container">
    <div class="skill-icons astro-LPFP2U5E">...</div>
  </div>
</div>

.skill-priority-wrapper {
  display: flex;
  flex-direction: column;
}
.skill-icons-wrapper {
  flex: 1;
  background: hsl(var(--main-light-3));
  border-radius: .5em;
}
.skill-icons:where(.astro-LPFP2U5E) {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  grid-auto-rows: auto;
  gap: .5em;
  padding: .5em;

.skill-priority-wrapper {
  display: flex;
  flex-direction: column;
}
.skill-icons-wrapper {
  flex: 1;
  background: hsl(var(--main-light-3));
  border-radius: .5em;
}
.skill-icons:where(.astro-LPFP2U5E) {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  grid-auto-rows: auto;
  gap: .5em;
  padding: .5em;

MarkBoots•3y ago

MyndiOP•3y ago

This does make sense. Will try different things first. But thanks for the help. A complete oversight from my part.

Gaming

Programming

Grid flex?