Is there a way to make the children of a container resize uniformly to take up all available space (-CodePudding

I've played around with and scoured the internet to see if either flex or grid will help with this problem to no avail. Here's the problem:

I have a container inside of which will only ever be one type of child (an square image). I would like every child to be the same size as all the other children, but I want the size of all the children to be set in order to take up all the available width and height of the container. As far as I know, flex cannot do this. If the flex-direction is row, for example, then setting the grow property on the children will only grow the children in rows where the full width isn't taken to fill the space. Grid views have a separate issue, whereas you cannot automate both the number of columns and the size of the columns (if using repeat(auto-fit), for example, you cannot use intrinsic or flexible sizes).

If it helps with a solution, this is for a react project and the styling is being defined as a style-component.

Does anybody have any creative solutions to this, or maybe a solution that I've overlooked in my search? I'd really appreciate it.

CodePudding user response：

One way to achieve this would be to set a padding-bottom for each child with a percentage-based value that is equal to the width:

.parent {
  display: block;
  width: 300px;
}

.child {
  float: left;
  padding-bottom: calc(100% / 3 - 10px); /* 3 per row, accounting for margin */
  width: calc(100% / 3 - 10px); /* 3 per row, accounting for margin */
  background: red;
  margin: 5px;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Just adjust the value 3 in both the padding-bottom and width to specify how many you want per row, and the 10px to reflect the margin in between the elements.

CodePudding user response：

A table would do this for you automatically. Set the table width to 100% (or however wide you want it to be). ItemStore could declare a table and tbody, and then in each of the tbody's tr's tds you could stick an item image.