How to implement adaptive grid layout?

the following layout rules

.line-block (small blue blocks) quantity, variable width and height
.container (container) variable width
.line-block align to the left in the line, starting to the left in the whole
in .cantainer aligns in the middle of the behavior unit
.cantainer Vertical orientation is top alignment, unequal space

flex and grid are not very familiar with the layout, try to use, but always meet part, not really satisfied, ask the bosses

Front-end css3 grid flex html5

Jul.04,2022

set a padding on the outside, and fill it automatically with flex inside

<div class="container">
  <div class="flex">
    <div class="line-block"></div>
    <div class="line-block"></div>
  </div>
</div>

.container {
  width: 400px;
  height: 400px;
  background-color: gray;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}

.line-block {
 margin: 10px;
 width: 30px;
 height: 30px;
 background-color: blue;
}

effect:

Boss, have you solved it? I also encountered the same problem

Previous: [failed to log in to set cookie]

Next: How to get the value inside without knowing the json string key?