我的 CSS 网格布局导致水平滚动，我不知道为什么答案

【问题标题】：My CSS grid layout causes horizontal scroll and I can't figure out why我的 CSS 网格布局导致水平滚动，我不知道为什么
【发布时间】：2018-10-04 10:54:23
【问题描述】：

使用 CSS 网格布局时，我的页面在 X 轴上显示了轻微的溢出。我删除了网格，然后溢出消失了。当我重置网格时，溢出再次出现。所以我想知道为什么会这样？

我尝试将最大宽度设置为 100vw 或更小：不起作用
我已尝试将边距和填充设置为零或更少：不起作用
即使溢出-x°作为解决方法°也不起作用
我已尝试将网格列装订线设置为 0：不起作用
我已为我的 React 组件再次显式重置，div 元素的边距和填充为零：不起作用。
我尝试将最大宽度的 grid_container 设置为 100vw：不起作用
我尝试更改 span 元素中的 div：不起作用

事实上，我有两个网格，一个在布局级别，另一个在布局元素级别。这是我目前情况的图片：

如您所见，我似乎有两个问题：

一列占据了所有页宽空间，第二列就溢出了
由于一些奇怪的行为导致结构溢出。

这里是我的 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>
)

这里是我的 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;  

} */

这是我的 css 文件：

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

这是我的 React.js 文件：

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

我想知道有什么问题。如果有人有任何提示，那就太好了。

【问题讨论】：

你能演示一下吗？
好的，这里是一个 repo：github.com/Hocoh/grid_css_overflow => 要使这个例子工作，只需 git clone 存储库，然后运行：yarn install，然后 yarn dev
不...github链接不合适，我们也不应该安装任何东西。您需要在问题中对此进行演示。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
好的，我将创建我的 sn-p

标签： css reactjs css-grid

【解决方案1】：

在.footer_grid 中包含box-sizing: border-box;。基本上它所做的是将边框包含在宽度中。否则，您的网格将比100vw 更宽，这会带来水平滚动条。

【讨论】：

您是否尝试将width 从100vw 更改为100%？
我刚刚重建了我所有的网格并将根网格放在一个包装器中，现在它的工作就像一个魅力
我的解决方法是将包装器设置为 99vw，因为 box-sizing:border-box;目前没有效果，我仍然想知道这种行为来自哪里，因为任何地方都没有设置边框

【解决方案2】：

我在使用网格和出现的水平滚动条时遇到了一些麻烦。我设法做到了，但我真的不知道它是如何工作的。

我尝试为全屏英雄图像创建一列页面，因此我使用：

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

它会创建一个水平滚动条，但如果我使用这个：

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

它消失了水平滚动条，在某处我读到它与某处的 auto 的默认值有关。希望对您有所帮助！

【讨论】：

嗯，这解决了我的问题，但现在我仍然想知道它是如何工作的。