Shulou(Shulou.com)06/01 Report--

This article mainly introduces css how to achieve the Holy Grail layout or double flying wing layout, the article is very detailed, has a certain reference value, interested friends must read it!

Holy Grail layout / a pair of flying wings layout

The classic Grail layout and double wing layout are composed of left, middle and right columns, which are characterized by fixed width of left and right columns, adaptive width of one column in the middle and fixed and equal height of three columns. In fact, it is also a variant of the above two-column layout and three-column layout, the overall implementation principle is consistent with the above N-column layout, may be some details to pay attention to.

The Grail layout and the two-wing layout are also a little different under roughly the same layout, except that the middle column of the double-wing layout needs to insert a child node. In the conventional implementation, it is also done in this middle column, how to make the contents of the middle column not obscured by the left and right columns.

The same

Put the middle column first and declare that its width and height occupy the parent node

The extruded left and right columns are pulled back to the same level as the middle column using negative values of float and margin

Different

Holy Grail layout: the parent node declares that padding leaves space for the left and right columns, fixing the left and right columns in the empty spaces.

Double wing layout: the middle column inserts child nodes and declares margin to make room for the left and right columns, fixing the left and right columns in the empty space

Holy Grail layout float + margin-left/right + padding-left/right

Because the position of the floating node cannot be higher than the previous or horizontal non-floating node, otherwise it will cause the floating node to sink. So when writing the HTML structure, move the middle column node after the right column node.

Grail-layout-x {padding: 0 100px; width: 400px; height: 400px; .left {float: left; margin-left:-100px; width: 100px; height: 100%; background-color: # f66;} .right {float: right; margin-right:-100px; width: 100px; height: 100px Background-color: # 66f;} .center {height: 100%; background-color: # 3c9;}}

Two-wing configuration float + margin-left/right

The HTML structure is roughly the same as above, except that a child node is inserted in the middle column. According to the difference between the two, the CSS statement will be slightly different from the above Grail layout, which can be observed and compared to find out the difference.

.grail-layout-y {width: 400px; height: 400px; .left {float: left; width: 100px; height: 100%; background-color: # f66;} .right {float: right; width: 100px; height: 100%; background-color: # 66f;} .center {margin: 0100px; height: 100px Background-color: # 3c9;}}

Holy Grail layout / a pair of flying wings layout flex

Using flex to realize the Grail layout / a pair of flying wings layout can ignore the above analysis, the width of the left and right columns is fixed, and the width of the middle column is self-adaptive.

.grail-layout {display: flex; width: 400px; height: 400px; .left {width: 100px; background-color: # f66;} .center {flex: 1; background-color: # 3c9;} .right {width: 100px; background-color: # 66f }} above is all the content of the article "how to achieve the Holy Grail layout or double Flying Wings layout in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.