The implementation of lattice style in CSS

Final results come out, Csapp finally did not hang, can have a good year!

Well, this time the demand is like this:

, in the parent box into the child box, the width of the child box is 50% (33%, 25% similar), so that the appearance of the above effect, seemingly simple, in fact, there are some cumbersome, specific code for

. Box{width:400px;height:400px;padding:5px;background-color: #CCC; border-radius:10px;}. block{float:left;width:50%;height:50%;border:5px solid #ccc; box-sizing:border-box;border-radius:7%; Background-color: #685473;}

The tips to use are:

1. Child elements using the Border-box model

2. Set floating for child elements

3. The spacing between the child elements is border with the same color as the parent element background color (because the width of the various box models does not include margin, using margin will make a row up to two boxes)

4. Parent element plus padding with the same width as child elements (if not added, there is 10px gray between child elements, but the edges adjacent to the parent element are only 5px gray, not beautiful)

This effect is useful when making some lattice games (see, 2048), etc.

The implementation of lattice style in CSS