The nine-square grid is a relatively old design. Its most basic performance is actually like a table with three rows and three columns. In fact, it was originally used more in the C/S structure of the window. For example, we often see a form in the software, which is actually a typical application of a nine-square grid. Because the form needs to be stretched in eight directions, so in This technology is widely used in C/S software for layout design. In today's society where B/S systems are popular, this layout is gradually used by some web designers in web pages. The most commonly used one is in the rounded corner box layout.
The following figure demonstrates the basic layout of the Nine Palace Grid:
As can be seen from the picture above, each row includes three columns, where the blue square is the top corner, these four blocks are areas with fixed width and height, and the four yellow areas are the four sides, which are to be horizontal or vertical tiled, while the orange area in the middle is the main area for loading content.
This kind of structure is most conducive to the automatic expansion of the width and height of the content area according to different screen resolutions. This kind of structure is also the layout structure that web designers want most. It is flexible and calm.
Let's implement it below:
Structural layer :
Because it has to adapt to stretching in eight directions, each direction is implemented with a div. If one is missing, the flexibility will be insufficient. Then according to this principle, we can get the following structure:
Style layer :
According to the structure, we can write the basic style. The basic implementation principle is to set the total container.box to relative positioning and set overflow:hidden; so that all areas beyond it are cut off, and the divs in the eight directions inside it are set to absolute positioning, and their z -Index is set to 2, and then the four corner containers are set to the four corners respectively.
.box{overflow:hidden;position:relative;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {position:absolute;z-index:2;}
<div class="box">
<div class="t_l"></div>
<div class="t_m"></div>
<div class="t_r"></div>
<div class="m_l"></div>
<div class="m_m">Content area</div>
<div class="m_r"></div>
<div class="b_l"></div>
<div class="b_m"></div>
<div class="b_r"></div>
</div>