Question

我目前正在使用Gatsby框架中的GridCss Reactjs。我正在尝试在Gatsby layout.js文件的子组件中构建子网格。但是，当我完成网格的设置后，子组件无法在合适的位置显示该组件。当我尝试使用特殊的Firefox插件在Firefox浏览器上显示网格时，网格无法显示。

页脚组件是从名为footer.js的文件中导入的。通常，页脚包含两列，一列用于社交媒体项目，另一列用于订阅新闻通讯表单。一切都很好地显示，但页脚却没有，这是页脚网格，无法很好地显示。

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

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

如果有人有任何提示，那将是很好，谢谢

Answer 1

answer：在gatsby中，您必须将CSS模块文件命名为name.module.css

React.js，CSS-为什么我的网格无法正确显示元素

1 个答案: