CSS to achieve the perfect layout of the photo album example

For a long time did not study CSS, all day with a variety of frameworks do not need to write their own, and recently to do a photo album page, encountered the first problem is how to arrange.

Give the design draft first and then say how the style is written

Analysis, there is a container, the container has padding, each row of each item and there is margin, the first thought is this

. container {
padding:10px;
}

. Container. Item {
Float:left;
width:24%;
margin-left:1%;
border:1px solid #CCC;
}

However, this situation can create two problems, First is the first item itself Margin-left Plus. Container's padding will cause the left margin to be larger than the top and bottom, and will cause the item and item between the vertical spacing and horizontal spacing can not be controlled to the same size.
So consider using the Calc attribute

. container {
padding:5px;
}

. Container. Item {
width:25%;
position:relative;
Float:left;
}

* * This image is only to get the width of the high, is actually invisible * * *
. Container. Item > IMG {
opacity:0;
width:100%;
}


/* This is the container for each item
. Container. Item. body {
border:1px solid #CCC;
Width:calc (100%-10px);
Height:calc (100%-10px);
Margin:auto;
left:0;
top:0;
bottom:0;
right:0;
}

If the above code to use SASS to achieve, it is easier, this implementation is equivalent to virtually every item occupied by the size is 25%, but inside the body are up and down around the 5px margin. The margin between item and item is actually the right spacing of each item plus the left margin of the right item, with the bottom margin of each item plus the top margin of item below it.

This implementation has several benefits:

1, up and down are the same margin
2, pure style
3, picture proportions will not be corrupted