Summary and Comparison of CSS Mainstream Layouts (4) Holy Grail Layout

Posted on Edited on In Waline:

The previous blog summarized the horizontal vertical centering and two column layout.

This time we will continue to look at the Holy Grail layout, which is the three-row and three-column layout.

First take a look at the rendering of the Holy Grail layout:

https://res.cloudinary.com/dvtfhjxi4/image/upload/v1619407434/origin-of-ray/微信截图_20210426111418_oly7qh.png

This layout is actually divided into two parts, the first is a simple three-line layout, head, middle and bottom.

Secondly, the middle part is a three-column layout, and this three-column layout is the core of the Holy Grail layout.

Let’s take a look at how to implement this three-column layout.

How to achieve a three-column layout

Option one

After reading my previous blog about the two-column layout, everyone should have a feeling for this three-column layout.

Let’s first transform it into a three-column layout based on the float + margin method in the two-column layout. The code is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #left, #right, #center {
            height: 300px;
        }
        #left {
            background-color: red;
            float: left;
            width: 300px;
        }
        #center {
            background-color: green;
            margin: 0 300px;
        }
        #right {
            background-color: grey;
            float: right;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

You can try this code yourself and find that there is a problem, it is right to the next line.

Why is this? Because float elements cannot exceed the previous non-float element.

The solution is also simple, move the center to the end.

Option two

The above scheme is the center at the end, although the effect can be achieved, but our main content is generally placed in the center, so for SEO is not very friendly, we can find a way to put the center in the front.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent {
            /* This is to prevent height collapse, because the child elements are all floating, separated from the doc stream */
            height: 300px;
            /* The margin-left value is the same as the left width, and the margin-right value is the same as the right width */
            margin-left: 300px;
            margin-right: 300px;
        }
        #left, #right, #center {
            height: 300px;
            float: left;
        }
        #left {
            background-color: red;
            width: 300px;
        }
        #center {
            background-color: green;
            /* auto expands to the same width as parent */
            width: 100%;
        }
        #right {
            background-color: grey;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="center"></div>
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

This implementation doesn’t really work because all three are floating, and center fills the entire parent, so left and right will be squeezed to the next line.

Then we need to move left, and because the three are floating, moving left can bring left to the previous line.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent {
            /* This is to prevent height collapse, because the child elements are all floating, separated from the doc stream */
            height: 300px;
            /* The margin-left value is the same as the left width, and the margin-right value is the same as the right width */
            margin-left: 300px;
            margin-right: 300px;
        }
        #left, #right, #center {
            height: 300px;
            float: left;
        }
        #left {
            background-color: red;
            width: 300px;
            /* move the width of the parent element to the left */
            margin-left: -100%;
            /* Move its own width to the left, combine the two and add three child elements that are floating, you can put left in the correct position */
            position: relative;
            left: -300px;
        }
        #center {
            background-color: green;
            /* auto expands to the same width as parent */
            width: 100%;
        }
        #right {
            background-color: grey;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="center"></div>
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>