CSS grid template columns - how does it work? - css

Question

I'm new to CSS Grid and trying to learn how it works. I've found a layout that I've been playing around with but I can't seem to figure out how to get the article to span the entire width of the footer/header. I've tried changing the grid-template-columns but and get pretty close to spanning it but not all the way.
Any tips would be greatly appreciated!
.grid {
display: grid;
grid-template-columns: 150px auto 0px;
grid-gap: 1em;
}
header,
footer {
grid-column: 1 / 4;
}
#media all and (max-width: 800px) {
aside,
article {
grid-column: 1 / 4;
}
}
/* Demo Specific Styles */
body {
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
header,
aside,
article,
footer {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 25vh;
}
header {
height: 250px;
}
<div class="grid">
<header>
Header
</header>
<aside class="sidebar-left">
Left Sidebar
</aside>
<article>
Article
</article>
<footer>
Footer
</footer>
</div>

Answer 1

I can't seem to figure out how to get the article to span the entire width of the footer/header.
You have created a 3-column grid:
grid-template-columns: 150px auto 0px
You've set the header and footer to span across all three columns:
header, footer {
grid-column: 1 / 4;
}
However, the article has no such instruction. It simply expands across column two, because that's the default setting (i.e., grid-column { 2 / auto }).
Therefore, you need to tell the article to expand across the third column. Add this to your code:
article {
grid-column: 2 / 4;
}
.grid {
display: grid;
grid-template-columns: 150px auto 0px;
grid-gap: 1em;
}
header,
footer {
grid-column: 1 / 4;
}
/* new */
article {
grid-column: 2 / 4;
}
#media all and (max-width: 800px) {
aside,
article {
grid-column: 1 / 4;
}
}
/* Demo Specific Styles */
body {
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
header,
aside,
article,
footer {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 25vh;
}
header {
height: 250px;
}
<div class="grid">
<header>Header</header>
<aside class="sidebar-left">Left Sidebar</aside>
<article>Article</article>
<footer>Footer</footer>
</div>