How to make resizable grids based on number of items?-CodePudding

I am working on a questionnaire

This looks alright for 3 or more answers as in the above screenshot. However, when there's a single or couple of answers, they are taking too much space, resulting in this:

How can I make the boxes smaller if there are fewer answers, still making them look good, i.e. centered and with proper spacing, etc.?

Here's a working code sandbox where you can see what I have so far.

CodePudding user response：

I suggest using javascript to count the item of the questionnaire and at the count, you just update the style using javascript add the particular class

CodePudding user response：

Maybe you may need a different approach with only flexbox

/* custom class */
.box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 2px solid black;
  margin: 2px;
}

/* responsivity class */
.responsive {
  width: 100%;
  display: flex;
  margin: 0 auto;
}
.center-placer {
  width: max-content;
  margin: 0 auto;
}

<div >
<div >
  <div >
    A
  </div>
  <div >
    B
  </div>
  <div >
    C
  </div>
  <div >
    D
  </div>
  <div >
    E
  </div>
</div>
</div>
<div >
  <div >
    <div >
      A
    </div>
    <div >
      B
    </div>
  </div>
</div>
<div >
  <div >
    <div >
      C
    </div>
  </div>
</div>