## Understanding and thinking of grail layout and twin-wing layout ##

The holy cup layout and the twin wing layout are both important layout methods that front-end engineers need to master daily. As I understand it, the grail layout and the twin wing layout are both designed to have two columns of fixed width, with the middle part adaptive

But in practice there are some differences

The holy grail layout

The graph is:

This is where left (200px), right (300px), and middle adaptation is implemented.

Note:

In HTML code, the middle section is placed first, followed by left and right to render first

Structure:

First, define the DOM structure of the entire layout. The theme part is the middle, left, and right columns wrapped by content. Middle is defined first.

css

A fixed width of 200px on the left and 300px on the right is set on the Content

Reserve space for the left and right columns

Then set the width and float for each column

The following results are obtained:

By the nature of the float, the middle is 100% wide, so it takes up all the space in the first row, with the left and right squeezed into the second row

Next, place left and right in the previously reserved positions

Then use position: relative, move 200 to the left and 300 to the right

The final effect is:

The basic layout is done by now, but I’m still thinking about the last step, which is the width. I used the padding property to reserve the left and right positions, so don’t forget that when calculating the width

Twin wing layout

Take the above pattern data as an example, set the width and float of each column, and reserve space

Structure:

The DOM structure of the twin-wing layout differs from the Grail layout in that the middle has a child element, inner

css

The final effect is:

Since the layout of twin wings does not use position: relative, so the calculation width is not considered, how much space is reserved, how much space is set

If you think you have learned something from reading this blog, please pay attention. Thank you for your support, if there is any deficiency, please give me your advice.

Wechat id: BSL521921