CSS Grid dimensions not behaving as expected

Question

I am trying the new CSS Grid Layout but I am having some unexpected results.

My first issue is that my footer is not occupying 98% of my viewport width, my header has the exact same code and looks fine.

The second issue is that the page looks like it has padding(whitespace) on the immediate left of the page but looks fine on the right. Everything looks the exact same in Firefox and Chrome.

My purple sidebar is purposefully indented so ignore!

Does anyone have experience with CSS grid layout?

.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 -->

@Temani Afif no I set to 100vw and even to 120vw and it does the same, it looks like the grid itself is doing it. — Ninja2k, Nov 26 '17 at 19:14
Define your layout in the top level `display:grid` element. For example, `grid-template-columns: [column-line-1] minmax(128px, 196px) [column-line-2] auto [column-line-3] minmax(128px, 256px) [column-line-4]; grid-template-rows: [row-line-1] 48px [row-line-2] auto [row-line-3] auto [row-line-4] auto [row-line-5] auto [row-line-6];` Here's a working example: freebase.rack.pub — Ronnie Royston, Nov 26 '17 at 19:49
Seeing this typo... There are 2 units that begin by `vm`: vmin and vmax. They can be useful when you want to adapt to both portrait and landscape orientation (of a tablet, of a smartphone but also of a desktop monitor that some rotate by 90deg). — FelipeAls, Nov 27 '17 at 13:27

Pedram · Accepted Answer · 2017-11-26T19:32:21.883

Your problem was width: 98vm and should change to width: 98vw and for extra padding you should set padding: 0; margin: 0; on body

my header has the exact same code and looks fine.

Compare:

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

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

Actually i think you don't try vw as you said in comment, but it now works.

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 -->

Padding:0 Margin:0 worked to fix the gap, changed my vw to 100 so it fits fully, now I just have to figure out what is wrong with that footer. — Ninja2k, Nov 26 '17 at 19:31
I not following you yet, what is the problem now? @Ninja2k | Also if this solved your problem, not bad to up vote and accept, and remove that useless down vote! — Pedram, Nov 26 '17 at 19:33
No problem @Ninja2k you know what, stupid things are these `down votes` funny — Pedram, Nov 27 '17 at 06:45

CSS Grid dimensions not behaving as expected

1 Answers1