what is it
[Holy Grail layout is a three-column layout with fixed width on both sides and self-adaptive middle]
The Holy Grail layout is a common style of web typography layout, usually used for web designs with two sidebars and a middle content area.
This layout divides the entire page area into three sections: the top navigation bar, the left sidebar, the right sidebar, and the main content area in the middle
Features:
The Holy Grail layout is characterized by columns on the left and right that are usually of equal width, while the main content area in the middle is relatively wide.
application:
It can usually be used for web design with rich content and multi-column display, such as blogs and news websites
Advantage:
The advantage of the holy grail layout is that it provides a wealth of information display space, allowing users to quickly find the information they need, but the change in the size of each element in the layout may affect the responsiveness of the page, which requires careful consideration and optimization during design.
Application 1:
The holy grail layout is realized by using absolute positioning. The main idea is that the left and right boxes use absolute positioning to fix the width and height, and the middle box uses margin-left and margin-right to fix the box in the middle.
<!DOCTYPE html>
<html lang="en">
<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>圣杯布局</title>
<!-- 圣杯布局是两边固定宽度，中间自适应的三栏布局 -->
<style>
html,body{
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 100vw;
height: 200px;
margin: 100px auto;
background-color: pink;
}
.box .box-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: violet;
}
.box .box-right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
background-color: violet;
}
.box .box-middle {
margin: 0px 40px;
height: 100%;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="box-left"></div>
<div class="box-middle"></div>
<div class="box-right"></div>
</div>
</body>
</html>
Application 2:
The holy grail layout is realized by using flex layout . The main idea is that the left and right boxes have a fixed height and width, and the middle box uses flex: 1 to occupy the remaining content area.
<!DOCTYPE html>
<html lang="en">
<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>圣杯布局2</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 100vw;
height: 100px;
margin: 100px auto;
background-color: pink;
}
.box .box-left {
width: 40px;
height: 100%;
background-color: violet;
}
.box .box-right {
width: 40px;
height: 100%;
background-color: violet;
}
.box .box-middle {
flex: 1;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="box-left"></div>
<div class="box-middle"></div>
<div class="box-right"></div>
</div>
</body>
</html>Application 3:
The implementation of the Holy Grail layout by grid is relatively simple and easy to understand
grid-template-rows: 100px 300px 100px;
grid-template-rows: define the number of rows, and set the height of each row
grid-template-columns: 200px auto 150px;
grid-template-columns: define the number of columns, and set each column The width of auto: self-adaptive
grid-row: 1;
grid-row: set the child element in the first row
grid-column: 1/4;
set how many columns the child element occupies. 1/4 means that the child element occupies columns 1, 2, and 3; 2/4 means that it occupies columns 2 and 3
<!DOCTYPE html>
<html lang="en">
<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>
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
padding: 50px 50px;
}
.container{
display: grid;
grid-template-rows: 100px 300px 100px;
grid-template-columns: 200px auto 150px;
}
.header{
width: 100%;
height: 100px;
background-color: bisque;
grid-row: 1;
grid-column: 1/4;
}
.footer{
width: 100%;
height: 100px;
background-color: #71c29d;
grid-row: 3;
grid-column: 1/4;
}
.column{
height: 300px;
line-height: 300px;
}
.left{
/* width: 200px; */
background-color: pink;
grid-row: 2;
grid-column: 1/2;
}
.center{
background-color: skyblue;
grid-row: 2;
grid-column: 2/3;
}
.right{
/* width: 150px; */
background-color: greenyellow;
grid-row: 2;
grid-column: 3/4;
}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="left column">left</div>
<div class="center column">center</div>
<div class="right column">right</div>
<div class="footer">footer</div>
</div>
</body>
</html>