html - Responsive thumbnail grid resize on width -

html - Responsive thumbnail grid resize on width -

it's must quite easy create responsive thumbnail grid resizes automatically when width changes. have seen multiple ways how thumbnails grids made using ordered list structure:

<ol> <li><img scr=""/></li> <li><img scr=""/></li> </ol>

others utilize div , img construction best way create thumbnail grid?

in illustration have content centered in browser max-width of 750px , want place 5 square thumbnails fill 100% of space , automatically adjust there size when width change. want play space between them adding space or remove space , later on decide on that, maintain 100% width of content area , add together space top , bottom between content text.

here fiddle

it doesn’t matter whether utilize divs or unordered or ordered list. tend take unordered list such case feels semantically right me. layout magic happens in stylesheets.

a reason why utilize lists comes in handy hierarchy of

list item content

so can utilize list container list items’ sizes relate (in case 20%) while each list items’ content can laid out in relation list item parent. can float list items within list (so don’t forget clear float via :after pseudo element) or set display inline-block (then have take out white spaces between li tags within list prevent gaps).

tip: relative vertical padding calculated in relation parent element’s width (not height!), allows give every list item fixed width/height ratio. want thumbnails squares, can set list items padding-bottom same value width: 20%. that’s useful if don’t work image elements background images. downside item content has positioned absolute within item.

i’ve changed fiddle accordingly: http://jsfiddle.net/lmmdj2yq/6/

as long spacing between list items meant relative list container well, bit of math. e.g. 5% in updated fiddle. 5 items have 4 gutter of 5% between them. set margin: 0 5% 5% 0 , width: 16% (=(100% - 5% * 4 gutters) / 5 items). each list item’s :nth-child(5n) has have margin-right set 0 create work.

as want have fixed gutters getting more tricky. in fiddle , may require add-on markup (i added link tags). horizontal spacing defined via list items’ padding (items have box-sizing: border-box;), vertical spacing via margins. list container has negative margin on both sides. check styles.

html css grid width thumbnails