In my previous tutorial " The Unbreakable Nine-Gong Grid Layout ", I introduced a relatively perfect nine-square grid layout method, which can fully flexibly adjust its width and height to achieve a more flexible layout style.
However, in order to perfectly reflect the elastic function, the price paid is still very heavy. From a structural point of view, the structure is relatively bloated, but each node is indispensable and cannot be streamlined, otherwise it will lead to its flexibility. not enough.
In practical applications, many designers may not like this layout structure and think it is redundant.
A perfect nine-square grid design should be a three-layer separated structure. The ideal nine-square grid I want to achieve should be like this:
Therefore, in this article, I will try to bring this layout as close to this idealized state as possible, making it more suitable for application in various aspects.
Regarding the first and second points, if you want to maintain its flexibility and achieve a streamlined effect, that is to say, if you want to "have your cake and eat it too," there is no other way except using js encapsulation. You can say that this is a kind of "hiding one's ears and stealing the bell" approach. Yes, I have to admit that this method of encapsulating with JS does not simplify its structure in essence, but only uses a dynamic way to encapsulate its structure. Create, but it does have an immediate effect on redundant html structures, and all redundant structures are invisible in one fell swoop.
Let’s learn how to improve our nine-square grid from the three-layer separation approach.
Structural layer :
This is the key area that we want to streamline as much as possible. We use js to dynamically create its structure, so the current structure should be the most original structure as follows:
<div class="box">The first nine-square box</div>
<div class="box" id="one">The second nine-square box</div>
<div class="box" id="two">The third nine-square box</div>
The only modification I made was to add a different ID to each box, which leaves a hook for the style sheet to call in order to create different colors later. Use this ID to create different pictures or color styles in the style sheet.
We should only need to add a class="box" to the div container, and the nine-square grid layout will be successfully created. This is simple enough!
Style layer:
Just now we buried the breakthrough point of customizing the style (the different ID) in the structure layer, so it becomes easier to write the style. We override and reset the styles of all nine places where the style needs to be changed to get different styles.
Of course, you can apply different pictures to the background as its background. I just called the color value for the convenience of demonstration. The specific interface style depends on your design skills.
/*Color scheme one*/
#one .t_l{background:blue;}
#one .t_r{background:blue;}
#one .t_m{background:orange;}
#one .m_l{background:orange;}
#one .m_r{background:orange;}
#one .b_l{background:blue;}
#one .b_r{background:blue;}
#one .b_m span{background:orange;}
#one .context{background:#666;}
/*Color scheme two*/
#two .t_l{background:red;}
#two .t_r{background:red;}
#two .t_m{background:black;}
#two .m_l{background:black;}
#two .m_r{background:black;}
#two .b_l{background:red;}
#two .b_r{background:red;}
#two .b_m span{background:black;}
#two .context{background:#999;}