标签：right 圣杯 footer aside header grid template css
<!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>
标签：right,圣杯,footer,aside,header,grid,template,css 来源： https://www.cnblogs.com/zhouxiaobai/p/16135500.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。