CSS 网格尺寸未按预期运行

Question

我正在尝试新的 CSS 网格布局，但我得到了一些意想不到的结果。

我的第一个问题是我的页脚没有占据视口宽度的 98%，我的页眉具有完全相同的代码并且看起来不错。

第二个问题是页面的左侧似乎有填充（空白），但右侧看起来没问题。在 Firefox 和 Chrome.

中，一切看起来都完全一样

我的紫色侧边栏是故意缩进的，所以请忽略！

有人使用过 CSS 网格布局吗？

.grid_container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(12, 1fr);
    /*grid-gap: 20px; Used to add a gap between tracks in our grid */
}
.header{
    grid-area:header;   /*Name for our grid, use this as reference to position items */
    width: 98vw;
    height: 40px;
    grid-row-start: 1;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    background:red;
}
.header_social_media_bar_list{
    list-style: none;
}
.header_social_media_bar_list li{
    float: left;
}
.masthead{
    grid-area:masthead;
}
.lightbox{
    grid-area:lightbox;
    grid-row-start: 2;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vw;
    height: 336px;
    background: blue;
}
.sidebar_left{
    grid-area:sidebar_left;
    grid-row-start: 3;
    grid-row-end: auto;
    grid-column-start: 2;
    grid-column-end: 12;
    width: 220px;
    height: 436px;
    background: purple;
}
.main_content{
    grid-area:main_content;
}
.footer{
    grid-area:footer;
    grid-row-start: 4;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vm;
    height: 136px;
    background: orange;
}

<div class="grid_container">
    <div class="header">
            <div class="header_social_media_bar">
                <ul class="header_social_media_bar_list">
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
                    <li>Item5</li>
                </ul>
            </div>
    </div>
    <div class="lightbox">
        Lightbox
    </div>
    <div class="sidebar_left">
        Left Bar
    </div>
    <div class="footer">
        Footer
    </div>
</div> <!--End Grid container -->

Answer 1

您的问题是 width: 98vm，应该更改为 width: 98vw，对于额外的填充，您应该在 body

上设置 padding: 0; margin: 0;

我的 header 具有完全相同的代码并且看起来不错。

比较：

.header {
    width: 98vw;
    ---------^
}

.footer{
    width: 98vm;
    ---------^
}

实际上我认为您没有像您在评论中所说的那样尝试 vw，但它现在有效了。

body {
margin: 0;
padding: 0;
}

.grid_container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(12, 1fr);
    /*grid-gap: 20px; Used to add a gap between tracks in our grid */
}
.header{
    grid-area:header;   /*Name for our grid, use this as reference to position items */
    width: 98vw;
    height: 40px;
    grid-row-start: 1;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    background:red;
}
.header_social_media_bar_list{
    list-style: none;
}
.header_social_media_bar_list li{
    float: left;
}
.masthead{
    grid-area:masthead;
}
.lightbox{
    grid-area:lightbox;
    grid-row-start: 2;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vw;
    height: 336px;
    background: blue;
}
.sidebar_left{
    grid-area:sidebar_left;
    grid-row-start: 3;
    grid-row-end: auto;
    grid-column-start: 2;
    grid-column-end: 12;
    width: 220px;
    height: 436px;
    background: purple;
}
.main_content{
    grid-area:main_content;
}
.footer {
    grid-area: footer;
    grid-row-start: 4;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vw;
    height: 136px;
    background: orange;
}

<div class="grid_container">
    <div class="header">
            <div class="header_social_media_bar">
                <ul class="header_social_media_bar_list">
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
                    <li>Item5</li>
                </ul>
            </div>
    </div>
    <div class="lightbox">
        Lightbox
    </div>
    <div class="sidebar_left">
        Left Bar
    </div>
    <div class="footer">
        Footer
    </div>
</div> <!--End Grid container -->

CSS 网格尺寸未按预期运行

CSS Grid dimensions not behaving as expected

html

css

grid-layout

css-grid