html - Responsive thumbnail grid resize on width -

It should be easy to create a sensitive thumbnail grid, when the width changes automatically when the image is resized automatically But I've seen in several ways how thumbnail grids are using some of the order list structure used:

If others just use a div and img structure, what's the best way to create a thumbnail grid?

In my example, I have a focused content in the browser, a maximum width of 750px and I want to put 5 square thumbnails that fill 100% of the location and when the width changes, To adjust. Apart from this, I want to play with space in those places which removes all the places or afterwards, but the content holds 100% width of the area and the content adds top and bottom position between the text.

It does not matter whether you use a DIV or an anonymous or even order list. I like to choose an anodized list for such a case because it seems meaningful to me but layout magic is in your stylesheet.

One reason that I use lists is that it often comes in handy that you

• list
  • item
    • content

Then you can use this list to contain the size of the container list item (in your case 20% ) While the contents of each list item can be kept in relation to its list item parents, you can float only list items within the list (so that through pseudo-element Sector float Do not forget to clear) or set display to inline-block (you'll need to take any white space between Elaiti tag list to prevent any gaps).

Tip: As the relative vertical padding is always calculated in relation to width ( height !) Of parent element, Items can give a fixed width / height ratio. As you want to intersect your thumbnail, you can set the list code padding-down to width: 20% with the same value. This is especially useful if you do not work with image elements, but with background images. The downside is that the contents of any object within the item should be complete

I have changed your Bella accordingly:

Until The difference between the list item is also relative to the container, so it's just a bit of math. Like 5% of 5 items in it, 5% of them are gutters. Then set the margin: 0 5% 5% 0 and width: 16% (= (100% - 5% * 4 gutter) / 5 items). Items in each list: To do this work, nth-child (5n) has to set its margin-claim to 0.

As soon as you want to decide the gutter, it is becoming more difficult. I usually do something like this and need additional markup (I've added the link tag). Horizontal spacing is defined through the padding of the list item (in the box-sizing: border-box; in the objects) vertical vacancies through margin, there is a negative margin on both sides of the list container . Check styles.