それは何ですか
[聖杯レイアウトは、両側が固定幅、中央が自動適応型の 3 列レイアウトです]
Holy Grail レイアウトは Web タイポグラフィ レイアウトの一般的なスタイルで、通常 2 つのサイドバーと中央のコンテンツ領域を備えた Web デザインに使用されます。
このレイアウトでは、ページ領域全体が、上部のナビゲーション バー、左側のサイドバー、右側のサイドバー、中央のメイン コンテンツ領域の 3 つのセクションに分割されています。
特徴：
Holy Grail レイアウトは、通常同じ幅の左右の列が特徴ですが、中央のメイン コンテンツ領域は比較的広いです。
応用：
通常、ブログやニュース Web サイトなど、リッチなコンテンツや複数列表示を伴う Web デザインに使用できます。
アドバンテージ：
聖杯レイアウトの利点は、豊富な情報表示スペースが提供され、ユーザーが必要な情報をすぐに見つけられることですが、レイアウト内の各要素のサイズの変更はページの応答性に影響を与える可能性があります。設計時の慎重な検討と最適化。
アプリケーション 1:
聖杯レイアウトは絶対配置を使用して実現されています。主なアイデアは、左右のボックスは絶対配置を使用して幅と高さを固定し、中央のボックスは margin-left と margin-right を使用してボックスを中央に固定することです。 。
<!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>
アプリケーション 2:
聖杯レイアウトは、 flex レイアウトを使用して実現されます。主なアイデアは、左右のボックスの高さと幅が固定されており、中央のボックスが残りのコンテンツ領域を占めるために flex: 1 を使用するということです。
<!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>アプリケーション 3:
グリッドによる聖杯レイアウトの実装は比較的シンプルで理解しやすいです
Grid-template-rows: 100px 300px 100px;
Grid-template-rows: 行数を定義し、各行の高さを設定
Grid-template-columns: 200px auto 150px;
Grid-template-columns: 列数を定義, そして各列を設定 auto: 自己適応の幅
Grid-row: 1;
Grid-row: 最初の行に子要素を設定
Grid-column: 1/4;
子要素が占める列数を設定します。1/4 は、子要素が列 1、2、および 3 を占めることを意味し、2/4 は、子要素が列 2 と 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>