html - How can you make pictures align evenly on a gallery page (i.e tiles)? -

html - How can you make pictures align evenly on a gallery page (i.e tiles)? -

im trying create pictures align evenly within div div width dependent on image width can adapt wider , slimmer screens. how can done? far effort is:

<style> .pictures { width: auto; border-radius: 30px 0 30px 0; background: white; text-align: justify; } img { border-radius: 30px 0 30px 0; border-style: solid; border-width: 0 1px 3px 0; border-color: rgba(0,0,0,1); height: 199px; margin: 15px; } </style>

...(some code superfluous respect question)...

<article> <div class="pictures"> <img src="images/001.jpg"> <img src="images/002.jpg"> <img src="images/003.jpg"> <img src="images/004.jpg"> <img src="images/005.jpg"> </article> </body>

the "width: auto;" seems nothing. there improve way of trying create div fit snug contents?

you trigger text-align:justify on every line adding invisible line end. demo

.pictures { width: auto; border-radius: 30px 0 30px 0; background: white; text-align: justify; } .pictures:after { content:''; display:inline-block; width:100%; }

use display:flex properties. demo

.pictures { width: auto; border-radius: 30px 0 30px 0; background: white; display:flex; justify-content:space-between; flex-wrap:wrap; }

both render not align lastly line column do.

see utilize of column properties: demo

.pictures { width: 100%; border-radius: 30px 0 30px 0; background: white; text-align: justify; column-width:250px;/* add together prefix if needed */ }

html css