This is the 14th day of my participation in Gwen Challenge

As a three-column layout, the Grail and twin wings are the most common layouts, and we will implement them step by step.

Grail layout and twin wings layout

First we need to know what the requirements are for both layouts.

The requirements are to implement the following three-column layout, (key!!)

1. The content width on both sides is fixed, and the content width in the middle is adaptive

2. Three-column layout with the middle column loaded and rendered first

Even though the layout is similar, there are essential differences:

As you can see, the main difference between the Grail layout and the twin wing layout is the area of the middle bar. Empty mouth say also can’t say a 123, see realization process directly 👇

The realization process of grail layout

Let’s start with basic HTML:

    <div class="header">header</div>
    <div class="content wrapper">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
Copy the code

It is important to place middle in front of left and right, because we want the middle column to be loaded and rendered first, so middle is placed first according to the order of execution.

Then write the basic CSS, with the background color and width and height for easy viewing:

Once the basic layout is in place, we just need to implement the middle three into the three-column layout we need.

First, set the width of the left and right columns. Set the width of the middle column to 100% because it is adaptive.

    .middle {
        width: 100%;
    }
    .left {
        width: 100px;
    }
    .right {
        width: 100px;
    }
Copy the code

And then we get to the point, we need to float to the left in each column, because we want them to be on the same line, but this creates a problem of height collapse. As shown in figure:

We have two solutions at this point,

The first is to set overflow: Hidden in the content area (the three-column layout), triggering the BFC spread area.

    .content {
        overflow: hidden;
    }
Copy the code

The solution is as follows:

2, the second method is to clear the float in the bottom footer area to solve the height collapse:

    .footer {
        clear: both;
    }
Copy the code

Can also solve 👇

Once we’re done with the height collapse, we need to figure out how to move the box on the left up.

Let’s first set the padding of the middle column so that we can put the left and right area of the middle column.

    .wrapper {
        padding-left: 100px;
        padding-right: 100px;
    }
Copy the code

Now we just need to position them relative to each other, and now they can be viewed as a row that doesn’t fit into 2 rows, so the box on the left just needs to move to the left to get to the corresponding position, so how much do I need to move?

From this picture we can see that we only need to move the width of middle + the 100px left on the right. Namely 👇

    position: relative;
    margin-left: -100%;
    right: 100px;
Copy the code

With these three lines of code, in two steps,Deviation to the left 100%And,Offset another 100pxWe move the left box to the left of middle.

The next column is the one on the right. Similarly, we just need to move the width of the box by 100px.

    margin-right: -100px;
Copy the code

At this point, we can say that the Holy Grail layout is almost complete, and we can verify that it looks the way we want it by stretching or shrinking the window.

Optimization:

We can see that the middle column is adaptive, but there is a slight flaw that the layout is affected when the window is too small. Just set the minimum width on the body.

    body {
        /* Set the minimum width to prevent the middle content from disappearing */
        min-width: 600px;
    }
Copy the code

A simple grail layout is complete.

To summarize, the Holy Grail layout is to float the basic layout to the left, leave two sides of the middle column, and then use relative positioning to margin-left the left and right columns to their respective positions. (Isn’t that easy!)

Three, the implementation process of the double flying wing layout

Let’s take a look at the implementation of the twin wing layout, first also write basic HTML:

    <div class="header">header</div>
    <div class="main middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer">footer</div>
Copy the code

The style also needs to float left, the previous is basically the same, now the effect is as follows 👇

However, instead of using relative positioning, we move the left column to the middle column directly through margin-left, as well as the right column.

    .left {
        margin-left: -100%;
    }
    .right {
        margin-left: -100px;
    }
Copy the code

The result is a three-column layout, but notice that the middle text is obscured by the left and right columns.

Because the left and right columns overwrite the contents of the middle column. As you can imagine, just set the PADDING on the middle bar to squeeze the content into the middle viewable area.

One problem with this is that if you add padding directly inside the middle column, it will mess up the layout.

So we need to put another div inside the middle column, and now the HTML looks like this:

    <div class="header">header</div>
    <div class="main middle">
        <div id="main-wrapper">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer">footer</div>
Copy the code

We add the padding on the inner div, which is 👇

    .main #main-wrapper {
       padding-left: 100px;
       padding-right: 100px;
    }
Copy the code

At this point, we have achieved the dual-wing layout:

Four,

Finally, the similarities and differences between the two.

1. Similarities

(1) The layout is similar, which is a three-column layout to achieve specific requirements.

(2) Both use float to float left out of the document flow, leaving the left, middle and right columns to float, forming a three-column layout through the parent margin.

2. Differences

(1) Different implementation methods:

The Holy Grail layout is to set up the layout with float +margin to make three columns on a row +relative position to adjust the position.

The twin wing layout is done via float+margin, without using relative positioning.

(2) How to handle the position of the two columns:

The Holy Grail layout is to add padding to the outer container, positioning the sides by relative positioning.

The layout of the two wings rests on the middle layer and a layer of div and padding is used to squeeze the content out of the middle.

The above is my grail layout and twin wing layout implementation process and summary, if any mistakes, welcome to point out ~~

Holy Grail layout demo source code

Twin wing layout demo source code