My CSS grid layout causes horizontal scroll and I can't figure out why

Question

Working with CSS grid layout, my page display a slight overflow in the X axis.I have deleted the grid and then the overflow disappears. When I reset the grid the overflow reappears. So I'm wondering why that occurs ?

I have tried to set the max-width to 100vw or less : doesn't work
I have tried to set margin and padding to zero or less: doesn't work
even overflow-x °as a workaround° doesn't work
I have try to set grid column gutters to 0: doesn't work
I have reset again explicitly for my React Component, the div element with margin and padding to zero : doesn't work.
I have tried to set a grid_container with max-width to 100vw: doesn't work
I have tried to change div in span elements: doesn't work

In fact I have two grids, one on a layout level, another on the layouts elements level. Here an image of my current situation:

As you can see, seems I have two problems:

a column occupies all the page width space and the secon column on the overflow
a structural overflow due to some weird behaviors.

Here my layout.js :

export default ({children, title = 'title' }) => (
    <Provider store={store}> 
        <div className={style.layout}> 
            <Head>
                <title>{ title }</title>
                <meta charSet='utf-8' />
                <meta name='viewport' content='initial-scale=1.0, width=device-width' />
            </Head>
            <HeadComponent/>  
            <div className={style.signature}>
                signature 
            </div>
            <div className={style.social_medias}>
                social_medias 
            </div>
            <div className={style.children}>
                {children} 
            </div>
            <Footer className={style.footer}/>  
        </div>
    </Provider>
)

here my layout.css :

html, body{ 
    margin : 0;
    width: 100vw;
    height: 100%; 
}
.layout{ 
    width: 100%;
    min-height: 100%; 
    margin:auto;
    text-align: justify;
    text-justify: inter-word;
    display : grid; 
    grid-template-areas:  
                "header   header"
                "signature social_medias"
                "children children"
                "footer   footer" ;
    grid-template-rows: 44px 0.5fr 1fr auto ;
    grid-template-columns: 1fr 1fr; 

}


.centerbar{  
    width: 100vw;
    background-color: orange ;
    display: flex;
    align-items: center;
    justify-content: center;
}

.headbar{ 

    grid-area: header; 
    display :grid ; 
    z-index:170;
    margin: auto; 
    width:100vw; 
    position:fixed;
    align-self: center;
    justify-self: center;
}


.signature{ 
    grid-area: signature;
}
.logo:hover{ 
    color: black;
}


.social_medias{ 
    grid-area: social_medias;
}


/*** children ***/

.children{ 
    background-color: pink;
    grid-area: children; 
    height: 100%;
}


/*** footer ***/ 
/* 
.footer{  
    grid-area: footer; 
    display: grid;
    width: 100vw;  
     margin-top: 10em;  

} */

Here my css file :

  .footer_grid{   
    grid-area: footer;  
    height: 100vh;    
    max-width: 100vw; 
    padding:0; 
    margin-top: 10vh;
    overflow-x:hidden;
    display:grid;
    grid-template-areas:  
                " let_chat     social_medias"
                " citations    email_form   " ;
    grid-template-columns: 2.5fr 1fr ;
    grid-template-rows: auto auto; 
    background-color: white;  
    border-top: solid; 
    border-width: 1px;
    padding-top: 25px;  
    grid-column-gap: 0;
    background-color: rgb(255, 255, 157);
} 

.let_chat{ 
grid-area: let_chat;
font-family: "Moonlight";
font-size: 90pt;
display : flex; 
justify-content: center; 
align-items: center
}

.social_medias{ 
grid-area: social_medias; 
display : flex; 
justify-content: end; 
align-items: start;
}

.citations{ 
    grid-area: citations; 
}

.email_form{ 
    grid-area: email_form; 
}

Here my React.js file:

import React from 'react'
import style from "./Footer.css";

export default () => {
  return ( 
      <span className={style.footer_grid}>
              <div className={style.let_chat}>
              let chat
              </div>
              <div className={style.social_medias}>
              social media
              </div>
              <div className={style.citations}>
              citations
              </div>
              <div className={style.email_form}>
              email form
              </div>
      </span> 
  )
}

I'm wondering what is wrong. If someone has any hint, would be great.

Answer 1

Include box-sizing: border-box; in .footer_grid . Basically what it does is that includes the border into the width. Otherwise, your grid will be wider than 100vw , which brings the horizontal scroller.

Answer 2

I'm having some troubles like you with Grids and the horizontal scrollbar that appears. I managed to do this but I dont really know how it works.

I tried to created a one column page for a fullscreen hero image so I use:

 main{ display:grid; grid-template-columns: 100vw; grid-template-rows:15vh 85vh; grid-template-areas: "header" "hero"; width: 100%; }

And it create an horizontal scrollbar, but if I use this:

 grid-template-columns: minmax(0,100vw);

It dissapears the horizontal scrollbar, somewhere I read that it have to do with the default value of auto somewhere. Hope it help!

My CSS grid layout causes horizontal scroll and I can't figure out why

Question

2 answers

solution1
2 2018-10-04 11:53:45

solution2
0 2019-06-24 02:59:48

My CSS grid layout causes horizontal scroll and I can't figure out why

Question

2 answers

solution1 2 2018-10-04 11:53:45

solution2 0 2019-06-24 02:59:48

solution1
2 2018-10-04 11:53:45

solution2
0 2019-06-24 02:59:48