浏览示例时建议拖动窗口大小,有些是响应式布局。
圣杯布局
说到布局,首先肯定是经典的三列圣杯布局。来看实现:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
.grid{
display: grid;
grid-template-columns:150px auto 150px;
grid-template-rows: repeat(3,100px);
grid-gap:1em;
}
header,
aside,
article,
footer{
background: #eaeaea;
padding:1em;
}
header,footer{
grid-column: 1 / 4;/* grid-column-start和grid-column-end的简写 */
}
/* 演示特定样式 */
body{
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
.grid > *{
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="grid">
<header>Header</header>
<aside class="sidebar-left">Left Sidebar</aside>
<article >Article</article>
<aside class="sidebar-right">Right Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html>
当然,现在移动端访问已经超过桌面端,所以我们无法绕过响应式布局,加上媒体查询,轻松搞定:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
.grid{
display: grid;
grid-template-columns:150px auto 150px;
grid-gap: 1em;
}
header,footer{
grid-column:1 / 4;
}
body{
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
@media all and (max-width:700px){
aside,
article{
grid-column: 1 / 4;
}
}
header,
aside,
article,
footer{
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 25vh;
}
</style>
</head>
<body>
<div class="grid">
<header>Header</header>
<aside class="sidebar-left">Left Sidebar</aside>
<article >Article</article>
<aside class="sidebar-right">Right Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html>