通過css grid實現聖盃佈局
阿新 • • 發佈：2022-04-12
<!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> div, body, html { padding: 0; margin: 0; }
body { width: 100%; height: 100%; }
.header { grid-area: header; }
.footer { grid-area: footer; }
.main { grid-area: main; }
.aside-left { grid-area: aside-left; }
.aside-right { grid-area: aside-right; }
.container { display: grid; grid-template-areas: 'header header header' 'aside-left main aside-right' 'footer footer footer'; min-height: 100vh; grid-gap: 10px;
}
.container>div { text-align: center; font-size: 30px; background-color: #2196F3; }
.container { grid-template-columns: 200px 1fr 200px; grid-template-rows: 60px 1fr 50px; }
@media screen and (max-width: 600px) { .container { grid-template-areas: 'header' 'aside-left' 'main' 'aside-right' 'footer'; grid-template-columns: 100%; grid-template-rows: 50px 50px minmax(300px, auto) 50px 80px; }
.aside-left, .aside-right, .main { display: flex; align-items: center; justify-content: center; } } </style> </head>
<body> <div class="container"> <div class="header">header</div> <div class="aside-left">aside left</div> <div class="main">main</div> <div class="aside-right">aside right</div> <div class="footer">footer</div> </div> </body>
</html>
<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> div, body, html { padding: 0; margin: 0; }
body { width: 100%; height: 100%; }
.header { grid-area: header; }
.footer { grid-area: footer; }
.main { grid-area: main; }
.aside-left { grid-area: aside-left; }
.aside-right { grid-area: aside-right; }
.container { display: grid; grid-template-areas: 'header header header' 'aside-left main aside-right' 'footer footer footer'; min-height: 100vh; grid-gap: 10px;
}
.container>div { text-align: center; font-size: 30px; background-color: #2196F3; }
.container { grid-template-columns: 200px 1fr 200px; grid-template-rows: 60px 1fr 50px; }
@media screen and (max-width: 600px) { .container { grid-template-areas: 'header' 'aside-left' 'main' 'aside-right' 'footer'; grid-template-columns: 100%; grid-template-rows: 50px 50px minmax(300px, auto) 50px 80px; }
.aside-left, .aside-right, .main { display: flex; align-items: center; justify-content: center; } } </style> </head>
<body> <div class="container"> <div class="header">header</div> <div class="aside-left">aside left</div> <div class="main">main</div> <div class="aside-right">aside right</div> <div class="footer">footer</div> </div> </body>
</html>