CSS网格内容居中
[英]CSS Grid content centering
问题描述
* { margin: 0; padding: 0; } .container { height: 100%; width: 100%; display: grid; grid-template-columns: 1fr 2fr; grid-template } header { height: 100%; width: 100%; background-color: #28aadc; border: 1px solid; } .header-fixedWidth { height: 320px; width: 90%; border: 1px solid; margin: 0 auto; } main { background-color: white; border: 1px solid; } .main-fixedWidth { height: 100%; min-height: 1000px; margin: 0 auto; width: 90%; border: 1px solid; } @media screen and (min-width: 895px) { .container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto; grid-gap: 20px; } } @media screen and (min-width: 988px) { header { max-width: 320px; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Call Me Nick</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <header> <div class="header-fixedWidth"></div> </header> <main> <div class="main-fixedWidth"></div> </main> </div> </body> </html>
我一直在修改CSS网格，并且试图重新创建此网站的模型 ： http : //mor10.com/
请注意，左侧边栏如何保持固定的宽度，而随着主要内容区域的增加，列数不断增加，而内容没有拉到中心。
我能够重新创建其基础，但是当我继续拉伸浏览器窗口时，主要内容区域（而不是拉伸区域）向屏幕的另一端拉，而不是在侧边栏和自身之间留出很大的空隙。
谁能帮我纠正这个问题？
1 个解决方案
解决方案1
0 2017-08-20 18:49:13
网格正在按预期工作。 内容正在扩展到最大。 问题在于您的HEADER比您的网格单元格窄。
尝试使用Mozilla Grid检查工具进行CSS网格故障排除。
在 CSS Grid 中居中正方形
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.