Kevin Powell - Community•3mo ago

How to Make a Responsive and Reusable Flexbox Component for Different Number of Boxes?

Hey everyone, I’m working on a component that uses display: flex . Currently, I have 3 boxes that are working fine, and they adjust nicely when resized. However, I want this component to be reusable in other places where I might want 4 boxes, or even just 2 boxes, without having to rewrite the code. My goal is to make the component flexible enough so that I can reuse it for any number of boxes (2, 3, or 4 boxes) . Is that possible?

flynt-component[name='HeadingBoxes'] {
  background-color: var(--background-color);
  margin-block-start: 0;
  padding-block: clamp(5rem, 16vw, 10rem);
  padding-inline: var(--container-spacing);

  .heading {
    text-align: center;
  }

  .flexContainer {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;

    .box {
      background-color: var(--box-background-color);
      border-radius: 16px;
      box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      flex: 1;
      max-width: 100%;
      color: var(--color-primary-white);
      padding: clamp(1.5rem, 4vw, 2.5rem);
      text-align: center;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);
        transform: translateY(-0.3125rem);
      }

      .icon {
        background-color: var(--color-blue-10);
        border-radius: 50%;
        inline-size: clamp(3.4375rem, 8vw, 4.0625rem);
        margin-block-end: clamp(0.75rem, 2vw, 1.25rem);
        padding: clamp(0.5rem, 1.5vw, 0.9375rem);
      }

      a {
        color: var(--color-accent);
        font-size: var(--font-size-body-small);
        padding-block: clamp(0.5rem, 1.5vw, 0.625rem);
        padding-inline: clamp(1rem, 3vw, 1.25rem);
        text-decoration: none;
        transition: all 0.3s ease;

        &:hover,
        &:focus,
        &:active {
          text-decoration: underline;
        }
      }
    }
  }

  .paragraph {
    margin-block-end: clamp(2.5rem, 8vw, 5rem);
    text-align: center;
  }
}

flynt-component[name='HeadingBoxes'] {
  background-color: var(--background-color);
  margin-block-start: 0;
  padding-block: clamp(5rem, 16vw, 10rem);
  padding-inline: var(--container-spacing);

  .heading {
    text-align: center;
  }

  .flexContainer {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;

    .box {
      background-color: var(--box-background-color);
      border-radius: 16px;
      box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      flex: 1;
      max-width: 100%;
      color: var(--color-primary-white);
      padding: clamp(1.5rem, 4vw, 2.5rem);
      text-align: center;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);
        transform: translateY(-0.3125rem);
      }

      .icon {
        background-color: var(--color-blue-10);
        border-radius: 50%;
        inline-size: clamp(3.4375rem, 8vw, 4.0625rem);
        margin-block-end: clamp(0.75rem, 2vw, 1.25rem);
        padding: clamp(0.5rem, 1.5vw, 0.9375rem);
      }

      a {
        color: var(--color-accent);
        font-size: var(--font-size-body-small);
        padding-block: clamp(0.5rem, 1.5vw, 0.625rem);
        padding-inline: clamp(1rem, 3vw, 1.25rem);
        text-decoration: none;
        transition: all 0.3s ease;

        &:hover,
        &:focus,
        &:active {
          text-decoration: underline;
        }
      }
    }
  }

  .paragraph {
    margin-block-end: clamp(2.5rem, 8vw, 5rem);
    text-align: center;
  }
}

5 Replies

Alex•3mo ago

I'm struggling to understand the question, because I don't see anywhere that your current code is particularly restricted to or designed for three boxes? Like, you have a flex container with wrapping and a child class that will grow to fill the space if it can. That should work for any number of elements, so what's the problem?

ChrislizardcOP•3mo ago

Yeah you have a point. My qeustion is kinda dumb. So yeah i can add boxes or remove boxes and thats fine desktop wise. But what if i want depending on the number of boxes to either have a 2x2 layout on mobile (if its 4 boxes) or just 1 box per line( if its 3 boxes). it's impossible right ?

ἔρως•3mo ago

you have 2 options: - manually set the grid-column-end of the last element - use flexbox with flex: 50% 1 1 set on the children the first one is the preferred option for your case

ChrislizardcOP•3mo ago

I went with this , i somehow made it work clicking around , still gotta figure it out how cause its a bit messy : https://codepen.io/Christian-Stoyanov/pen/OJeKaQR Only reason im not sharing html is because i use twig (html + php + syntactic sugar in a way)

ἔρως•3mo ago

it looks messy, but if it works then it works i can't comment about that because it's missing the html

Gaming

Programming

How to Make a Responsive and Reusable Flexbox Component for Different Number of Boxes?