The Holy Grail layout and the winged wing layout have long been a popular topic In front-end interviews. The Holy Grail layout was introduced In a 2006 article by Matthew Levine called “In Search of the Holy Grail.” In contrast to the two-wing layout, its origin is not the visual representation of the page. In the West, the holy Grail means something desired. The layout of the two wings is derived from Taobao’S UED, which can be said to be inspired by page rendering.

rendering

Originally recorded a small video, but it could not be uploaded to the blog. In the video, we can find that with the change of the width of the page by zooming in and out, the middle box of the three-column layout is rendered first, and the width of the boxes on both sides is fixed. Even if the page width becomes smaller, it does not affect our browsing. Note: To be safe, it’s best to give the body a minimum width!

​

Grail layout requirements

  • The header and footer occupy all the width of the screen, and the height is fixed.
  • The container in the middle is a three-column layout.
  • The width of the three-column layout is fixed on both sides, and the middle section automatically fills the entire area.
  • The height of the middle section is the height of the highest area of the three columns.

Three implementations of the Grail layout

[1] Float

  • Define header and footer styles so that they are fully aligned horizontally.

  • The three columns in the Container are set to float and relative position (used later), center is placed first, and footer clears floats.

  • The left and right columns of the three columns are 200px and 150px wide, with the center set to be 100% full

  • In this way, the center will occupy the entire container due to floating, and the left and right areas will be squeezed down

  • Margin-left: -100%; Return left to the left of the previous row

  • This hides the center, so set the padding-left for the outer container to 200px; padding-right: 150px; Make room for left and right

  • Left: -200px; left: -200px; left: -200px; Pull left back to the far left

  • Also, for the right area, set margin-left: -150px; Pull right back to the first row

  • There is 150px space left on the right, so finally set right: -150px; Just pull the right area to the far right.

    body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer {background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #footer { clear: both; }

    #container { padding-left: 200px;

    padding-right: 150px;

    overflow: hidden; }

    #container .column { position: relative; float: left; text-align: center; height: 300px; line-height: 300px; }

    #center { width: 100%; background: rgb(206, 201, 201); }

    #left { width: 200px; right: 200px; margin-left: -100%; Background: RGBA (95, 179, 235, 0.972); }

    #right { width: 150px;

    margin-left: -150px;

    right: -150px; background: rgb(231, 105, 2); }

    #header
    #center
    #left
    #right

    #footer

[2] Flex flex layout

  • Header and footer styles are set horizontally.

  • In a Container, arrange the left, Center, and right parameters in sequence

  • Display: flex;

  • Flex: 1; Can be

    body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #container { display: flex; } #container .column { text-align: center; height: 300px; line-height: 300px; } #center { flex: 1; background: rgb(206, 201, 201); } #left { width: 200px; background: rgba(95, 179, 235, 0.972); } #right { width: 150px; background: rgb(231, 105, 2); }

    #header
    #left
    #center
    #right

    #footer

[3] Grid layout

As shown in the figure above, we divide the body into three rows and four columns, with five column gridlines

  • Add display: grid; Property becomes a grid

  • Set grid-row: 1 for the header element; And the grid – column: 1/5; This means that those occupying the first row of the grid begin on the first column and end on the fifth column

  • Set grid-row: 3 for the footer element; And the grid – column: 1/5; This means that those occupying the third row of the grid begin on the first column and end on the fifth column

  • Set grid-row: 2 for the left element; And the grid – column: 1/2; This means that those occupying the second row of the grid begin on the first column and end on the second column

  • Set grid-row: 2 for the center element; And the grid – column: talent; This means that those occupying the second row of the grid begin on the second column and end on the fourth column

  • Set grid-row: 2 for the right element; And the grid – column: 4/5; This means that those occupying the second row of the grid begin on the fourth and end on the fifth

    body { min-width: 550px; font-weight: bold; font-size: 20px; display: grid; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #header { grid-row: 1; grid-column: 1/5; } #footer { grid-row: 3; grid-column: 1/5; } .column { text-align: center; height: 300px; line-height: 300px; } #left { grid-row: 2; grid-column: 1/2; background: rgba(95, 179, 235, 0.972); } #center { grid-row: 2; grid-column: 2/4; background: rgb(206, 201, 201); } #right { grid-row: 2; grid-column: 4/5; background: rgb(231, 105, 2); }

    #header
    #left
    #center
    #right
    #footer

The article is updated every week. You can search “Front-end highlights” on wechat to read it in the first time, and reply to [Books] to get 200G video materials and 30 PDF books