Trouble setting grid areas

User 2892796 Photo


Registered User
3 posts

Grid newbie here. I can't figure out why my 'footer' area is plopped inside my 'aside' area. The page is here: http://lubbockfol.coffeecup.com/grid-la … dex06.html View source & check 'grid06.css'. Can anyone point out the obvious thing I'm missing? Appreciation in advance...
User 2892796 Photo


Registered User
3 posts

Well, I see the link isn't working, so here's the relevant section of the CSS file:

.fol-grid {
/* height: 800px; */
display: grid;
/* grid-template-columns: 1fr; */
grid-template-rows: auto auto auto 1fr 1fr auto;
grid-template-areas: 'logo' 'header' 'navigation' 'main' 'aside' 'footer';
grid-row-gap: 1px;
grid-column-gap: 1px;
font-family: Arial, Helvetica, sans-serif;
}

.fol-logo {
grid-area: logo;
width: 100px;
}
.fol-header {
grid-area: header;
padding: 20px;
font-size: 24px;
font-weight: bold;
color: #0080C0;
}
.fol-nav {
grid-area: navigation;
padding: 20px;
}
.fol-main {
grid-area: main;
background-color: #f9f6d2;
padding: 20px;
text-align: center; /* temp */
}
.lib-pix {
grid-area: aside;
background-color: #d4ffd1;
padding: 20px;
}
.fol-footer {
grid-area: footer;
background-color: #ffd1d1;
padding: 20px;
text-align: center;
}

@media screen and (min-width: 850px) {
.fol-grid {
grid-template-areas:
'logo header header'
'logo navigation navigation'
'main main aside'
'footer footer footer';
grid-template-columns: auto 1fr 1fr; /* 3 cols */
grid-template-rows: auto auto 1fr auto; /* 4 rows */
}
.fol-header {
font-size: 36px;
}
.fol-logo {
width: 125px;
}
}

@media screen and (min-width: 1400px) {
.fol-grid {
grid-template-areas:
'logo header header'
'logo navigation navigation'
'main main aside'
'footer footer footer';
grid-template-columns: auto 2fr 1fr; /* 3 cols */
grid-template-rows: auto auto 1fr auto; /* 4 rows */
}
.fol-header {
font-size: 48px;
}
.fol-logo {
width: 150px;
}
}
User 187934 Photo


Senior Advisor
18,132 posts

Hi Las794,
Your footer <aside><footer></footer></aside> is within your aside container.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2892796 Photo


Registered User
3 posts

I *knew* it would be something dumb like that--thank you! :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.