Layout of repeating blocks

Quite often during site layout there is a need to place blocks of the same width, but of different heights in a container with variable width (read rubber). Plus, this list can be applied to the filter, which JS-th hides or shows the elements of the list, while it should not destroy the "lines", layout, or form holes, so the solutions on the tables do not roll immediately. The simplest example is the product catalog:



We decided together with morfi to make a more or less universal solution that would allow us to publish this kind of content without any problems. The important point is that the height of the blocks may depend, for example, on the height of the header, or on the description, if it were in the layout.

There are two pitfalls here. The first - the gaps between the blocks. If you just put float:left; margin-right |bottom:50px float:left; margin-right |bottom:50px (I simplified the syntax), then the last element in the "line" will always be indented, so it will never be clearly on the border of the container.
')
float solution lying on the surface:

1. The elements are given float:left; margin-top |left:50px float:left; margin-top |left:50px
2. Wrap the elements in another container and set the margin-top |left:-50px - negative indent, and now let the outer container (the original one) be called wrapper, and the inner container - container.
3. The container and wrapper for friendship with IE need to be assigned a zoom:1 and so that they do not collapse from float elements - overflow:hidden
4. Purely for IE, you need to specify display:inline for blocks, otherwise we will get doubled margin

Everything would be fine, but in such a situation, if the height of the blocks can be very different, such a joint can occur:



Pay attention to the blocks three, four and five. The green block is a wrapper, blue is a container.

Logically, the situation is clear - the block must pull the line (or “string”) in which it is located. This behavior is typical of display: inline-block .

In order to apply this solution in practice you need:

1. Set the margin again as in the example above.
2. We distribute the universal cross-browser display:- moz-inline-box ; display: inline-block ; *zoom:1; *display:inline design to the display:- moz-inline-box ; display: inline-block ; *zoom:1; *display:inline display:- moz-inline-box ; display: inline-block ; *zoom:1; *display:inline
3. We 50px that the horizontal distances turned out to be slightly more than the required 50px - this is because of the gaps between the inline-block
4. To deal with spaces, measure its width - it turns out 4px , which is 25% of 1em , which is 16px default . Thus, we put the container word-spacing :-0.25em , and the word-spacing :normal blocks
5. For IE, you must also register the text-align :top blocks, otherwise the elements will be aligned to the baseline.

Bugs have not yet been noticed, the solution is cross-browser. The inline method calmly maintains the text-align :center setting on the container (see screenshot ). It is only necessary not to forget the blocks to put back text-align :left (see style. css - I commented them there).

A working example is available at http://test.dis.dj/blocks/ .

P. S. The decision is not new, but it will be useful in any case.

P. P. S. The screenshot shows the future online store portal for moms.