代码之家 › 专栏 › 技术社区 › Webwoman

Reactjs,CSS-为什么我的网格不能正确显示元素

reactjs css javascript

Webwoman · 技术社区 · 6 年前

我目前正在盖茨比框架中使用Reactjs和GridCss。我试图在Gatsby layout.js文件的子组件中构建一个子网格。但是,当我设置完网格后,子组件无法在其正确位置显示组件。当我试图在Firefox浏览器上显示带有特殊的Firefox插件的网格时,网格无法显示。

footer组件是从footer.js文件导入的。通常,页脚包含两列,一列用于社交媒体项目,另一列用于订阅新闻稿表单。所有的东西都显示得很好,但是页脚没有显示出来,这就是页脚网格。

这里是my layout.js:

<div >
    <div className={style.header}>
      <div className= {style.headbar}> 
        <div className={style.headerLeft}>
          <Logo className={style.logo} /> 

        </div>
        <div className={style.headerRight}>
          <Menu className={style.menu}/> 
        </div>
      </div>
     </div>
    <Chat/>

   <div className={style.children}>
    {children()} 
    </div>

    <div> 
    <Footer  className={style.footer} /> // everything is well display but not the footer, this is the footer grid which fails to display well

    </div>
  </div>

我的layout.css:

.layout{ 
    width: 100%;
    margin:auto;
    text-align: justify;
    text-justify: inter-word;
    display : grid; 
    grid-template-areas:  
                "header   header"
                "children children"
                "footer   footer" ;             
}

{...}

.footer{ 
    height: 20em;
    width: 100vw; 
    grid-area: footer; 
    background-color: white; 
}

我的footer.js“从footer.js导入”:

export default () => {
  return (
    <div className={style.footer_grid}>
            <div className={style.social_media}>
             social media
            </div>
            <div className={style.newsletter_subscription}>
            subscriptionewsletter
            </div>
    </div>
  )
}

我的footer.css:

.footer_grid{       
width: 100vw; 
display:grid;
grid-template-areas: 
    "footer_social_media  footer_newsletter_subscription";
grid-template-columns:  2.5fr 1fr; 
} 

.social_media{ 
grid-area: footer_social_media;
display : flex; 
justify-content: center; 
align-items: center
}

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

尽管我很小心地遵循了所有的网格规则,但是我的网格无法正确显示。

如果有人有任何暗示,那就太好了, 谢谢