I want to put a row of 4 images with a small text below each image, this I already know how to do, but I have many images and I need each row to have a maximum of 4 images.
I tried to do this using 4 li within 1 ul, and using display flex, it worked, but I need to keep editing the content. So I need to know how to put a limit of 4 images per row.
Look at the example:
Edit:
Myscript:
<article><div><ul><li><a><img></a><h4><a></a></h4><h5><a></a></h5></li>Edit2:
You can do this by dividing the total width of ul by 4 ( 25% ). Other explanations in the code.
In this case, I did not use float: left , which is not recommended because it will prevent the ul velopment from expanding with content.
body{ /* só para exemplo, elimina espaçamento do body a seta um fundo escuro*/
margin: 0;
background-color: #444;
font-size: 16px;
}
article ul{
font-size: 0; /* elimina espaços entre as li */
background-color: #fff; /* fundo branco na ul, se for preciso */
}
article ul li img{
width: 100%; /* ajusta a largura da imagem dentro da li */
display: block; /* convertendo para block elimina espaço natural abaixo da imagem */
}
article ul, article ul li{ /* remove espaços e o bullet da ul e das li */
list-style: none;
margin: 0;
padding: 0;
}
article ul li{
display: inline-block;
width: 25%; /* divide a largura por 4 */
box-sizing: border-box; /* restringe o padding à área da li */
text-align: center; /* centraliza o conteúdo */
padding: 15px; /* espaçamento interno entre o conteúdo e a borda da li */
font-size: 16px; /* ajusta o tamanho da fonte nas li com o tamanho padrão */
vertical-align: top; /* alinha as li no topo da linha */
}<article>
<ul>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
<li>
<a href="#"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></a><h4><ahref="#">Texto texto texto texto</a></h4>
<h5><a href="#">Texto texto texto texto</a></h5>
</li>
</ul>
</article>This would be very easy to do with a server-side language, but since this option was not put in the question, let's go to CSS.
In the examples below we used img and div , but the logic is for any element.
Whenever you need something that happens with each% of items%, you can use n (or other :nth-child , depending on the context).
See an example:
.quatro {
display:block;
float:left;
margin:10px;
}
.quatro:nth-child(4n+1) {
clear:both;
}<img class="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100"><imgclass="quatro" src="http://placecage.com/100/100">Tolearnmore:
What the "n", numbers and signs mean in the "nth-child" or "nth-last-child" selectors "?
Depending on the desired effect, simply set the width of your% s from% s to 25%. Just watch out for nth :
.quatro {
width:25%;
float:left;
}<div class="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div><divclass="quatro"><img src="http://placecage.com/100/120"></div> Another way to do this is to use display:grid you can determine the break when this is done repeat(4, 1fr) . If you use this example I suggest you study one in the Grid to better understand how to use it in a practical way.
Here you can consult the browser support link works partially from IE 10 forward using the prefix -ms- .
See the practical example.
.wrap {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}<div class="wrap">
<div class="box">
<a href="#"><img src="https://fillmurray.com/100/100"alt=""></a>
<h4><a href="#">Título</a></h4>
<h5><a href="#">Lorem, ipsum dolor.</a></h5>
</div>
<div class="box">
<a href="#"><img src="https://fillmurray.com/100/100"alt=""></a>
<h4><a href="#">Título</a></h4>
<h5><a href="#">Lorem, ipsum dolor.</a></h5>
</div>
<div class="box">
<a href="#"><img src="https://fillmurray.com/100/100"alt=""></a>
<h4><a href="#">Título</a></h4>
<h5><a href="#">Lorem, ipsum dolor.</a></h5>
</div>
<div class="box">
<a href="#"><img src="https://fillmurray.com/100/100"alt=""></a>
<h4><a href="#">Título</a></h4>
<h5><a href="#">Lorem, ipsum dolor.</a></h5>
</div>
<div class="box">
<a href="#"><img src="https://fillmurray.com/100/100"alt=""></a>
<h4><a href="#">Título</a></h4>
<h5><a href="#">Lorem, ipsum dolor.</a></h5>
</div>
</div>Image inspecting Grid for Chrome DevTools
