文章/答案/技术大牛

发布

问CSS网格内容居中
EN

Stack Overflow用户

提问于 2017-08-17 02:26:48

回答 1查看 80关注 0票数 0

* {
    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 grid，并试图重新创建这个website的模型：http://mor10.com/

请注意左侧边栏是如何保持固定宽度的，而随着主内容区域的增长，列的数量不断增加，而不会将内容拉到中心。

我能够重建这个基础，但是当我不断伸展我的浏览器窗口时，主要的内容区域，而不是伸展，拉向屏幕的另一端，在侧边栏和它自己之间留下了巨大的差距。

有人能帮我改正这个错误吗？

css-grid

html

css

grid

回答 1

Stack Overflow用户

发布于 2017-08-21 02:49:14

网格正在按预期工作。内容正在伸展到最大值。问题是你的页眉比你的网格单元格窄。

尝试使用Mozilla Grid检查工具进行css-grid故障排除。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45720605

复制

相似问题

问CSS网格内容居中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格内容居中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格内容居中
EN