Currently, I am working with ReactJS, GridCSS in the Gatsby framework. I am attempting to create a subgrid within a subcomponent of the Gatsby layout.js file. However, after setting up my grid, the subcomponent fails to display the component correctly in its designated position. Even when I try to view the grid on Firefox using a special Firefox plugin, it does not show up.
The footer component is imported from a file named footer.js. Typically, the footer consists of two columns for social media items and newsletter subscription form. Everything appears fine except for the footer grid which fails to display properly.
This is 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>
This is my 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;
}
This is my footer.js (imported from 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>
)
}
This is my 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;
}
Even though I have followed all the grid rules diligently, my grid refuses to display correctly. If anyone has any suggestions, it would be greatly appreciated. Thank you