How to impose this?

There's a portfolio site:
5e97218c821e7944671352.png

As it is better to impose?
Suppose there is a div wrapper with the class "works"
In it, I want FlexBox to do a few lines at the 5 pictures in each:

5e974604029c1507467622.png

What are the options layout?
I have in mind is:
<div class="works">
 <div class="first-line">
img*5
</div>
 <div class="second-line">
img*5
</div>
 <div class="fourth-line">
img*5
</div>
 <div class="fifth-line">
img*5
</div>
</div>


But I think it is not the best decision, because you will need each block line ask FlexBox styles.
April 19th 20 at 12:12
6 answers
April 19th 20 at 12:14
For example, using the grids, in order not to strain:

.line {
width: 100%;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}


<div class="works">
 <div class="line">
img*5
</div>
 <div class="line">
img*5
</div>
 <div class="line">
img*5
</div>
 <div class="line">
img*5
</div>
 <div class="line">
img*5
</div>
</div>
April 19th 20 at 12:16
The decision, when the card inside a layout divided into blocks by 5 pieces, not the best. Because the screens are different. On the phone you have 2-3 in a row on the comp 5 pieces, and on a tablet, maybe 4 pieces. To be able to manipulate via CSS the number of blocks in a row, it is necessary to make all 20 blocks of the same children in 1 parent:

the <ul>
the <li> img </li>
the <li> img </li>
...
</ul>


The picture I wrapped in li, because in the future it might be useful. For example, under the picture will require a signature or picture will have some other alvesco. Another potential problem: error when resize before adding pictures to the server - the picture is 100 x 200 px will be px 100х199, this layout can go. So the pictures must be wrapped in blocks, which will be clearly specified size.

Using CSS blocks li asked the most important property of display:inline-block;

ul {text-align:center; list-style:none; padding:0; margin:0;}
li {width:20%; display:inline-block; margin:0 0 1em; padding:0;}
img {width:90%; vertical-align:top;}


And the number of blocks in a line can change across the width of the li.
The size of the images is assumed floating (depending on the screen - it is logical). So it is necessary to prepare images slightly larger than required.

I usually need two images: for PC and for mobile phones. But I also know psychopaths who are doing almost 10 different sizes for all popular screen resolutions ) In practice, this excess measure, you can check the google pagespeed tool.
April 19th 20 at 12:18
Flexbox is able to multiline content overflow.
April 19th 20 at 12:20
Here it is:

click
I would make easy amendments in your proposal. I think this is what you need.

div {
 height: 200px;
 background: #444;
 margin: 10px;
}

.section {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: flex-start;
 flex-wrap: wrap;
 background: none;

}
.section > div {
 flex: 0 0 150px;
}


<div class="section">
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
the <div></div>
</div>
- alysha.Heathcote59 commented on April 19th 20 at 12:23
April 19th 20 at 12:22
Why is there lines?
<div class="works">
 <div class="works-item">
img
</div>
</div>


.works {
display: flex;
flex-wrap: wrap;
}
.works-item {
margin: 0 10px 20px;
width: calc(20% - 20px);
}
img {
max-width: 100%;
height: auto;
}
April 19th 20 at 12:24
che is not so, the Flex is fine, responsive at all to do nileguide one line
(55 blocks I've added via JS to not copy-paste)



UPD
AAA I just now finished reading the issue, flex-wrap: wrap and set the width of an element in Flex-grid, and ready

Find more questions by tags HTMLCSS