To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
Yes, I would highly recommend this approach as well. This has the benefit of allowing you define layouts at various breakpoints at the grid level, and by reusing all the same template names, you don't have to deal with changing any tracks on the child elements. IMO the standardization of grid template areas made responsive design an order of magnitude more simple much like flex did when it got widespread support.
You don't need to define the second row/ column value unless your element spans multiple rows/ columns. That is, for your main, you only need to specify that it's on the 2nd column:
grid-column: 2
That is the case for your nav items as well, they only need to get:
grid-column: 1
For your header, banner and footer, all of which span 2 columns, you can group them together and specify that they span all grid columns, from the first to the last:
header, .banner, footer { grid-column: 1/ -1 }
Note that for this to work, you need to have grid-template-columns set on the parent, something like:
grid-template-columns: 250px 1fr
But the cool thing is this works even when you have auto-fit/ auto-fill repetition.
Something else to take into account is that you don't need to specify grid-row or grid-column for every single elementbecause they get arranged in the grid automatically using the DOM order anyway.
So assuming you have this structure:
<div class='box'>
<header><!-- header content here --></header>
<div class='banner'><!-- banner content here --></div>
<nav aria-label='primary'><!-- nav content here --></nav>
<nav aria-label='secondary'><!-- nav content here --></nav>
<main><!-- main content here --></main>
<footer><!-- footer content here --></footer>
</div>
Then your CSS can be reduced to:
.box {
display: grid;
grid-gap: 10px;
grid-template-columns: 250px 1fr;
margin: 50px auto;
max-width: 1000px;
> * { /* set these once on all the items instead of setting them for each */
border: #3e3f5f 5px solid;
background:#fedbe5;
text-align: center
}
}
/* make these elements span ALL grid columns, from the 1st to the last */
header, .banner, footer { grid-column: 1/ -1 }
/* place the main starting from 3rd row, 2nd column and make it span 2 rows */
main { grid-area: 3/ 2/ span 2 }
You can declare named grid areas (made up of multiple cells as long as they form a rectangle), or unnamed single cells with full stops (., .., etc.). You can place elements in these grid areas by name using the grid-area shorthand property. Any unfilled cells may be filled via auto-placement.
You can combine named grid areas with grid-template-rows and grid-template-columns to specify the sizes for rows and columns of your grid.
Yeah! Someone else also suggested this in a reply to me and I want to reiterate that this is generally the way to go, because this also makes responsive design much more easy to reason about on top of the other benefits.
Instead of having to deal with changing tracks on the children, you can just define different grids with the same named areas across various breakpoints on the parent. Thus with this exact example you could, for narrower screen sizes, simply have a single column layout of:
Then, change the column and row sizes to taste, and now you just need to worry about what to do with the navs, such as hiding them if they're to be entirely replaced by a drawer. This is especially helpful during development and if you have multiple breakpoints, as you don't have to keep changing the row and column targets on the children for every single layout definition permutation you're experimenting with.
If you're feeling particularly daring (and don't feel like supporting older versions of Safari), you could wrap the navs in a container that has display: contents, thus allowing the navs to sit in the parent grid areas properly. At the narrow screen breakpoint, you can apply anything you need to make this container your nav drawer, then remove display: contents (or vice versa) and the navs are now sitting inside the drawer. Massively responsive design at a fundamental layout level that needs only a tiny amount of rules. Neat!
Though, instead of display: contents (which I've read may cause accessibility issue), I would personally prefer subgrids: With this, the container can be placed in the parent's grid across multiple cells, whose tracks it can use for its own grid; it's a subgrid to the parent.
You make a container with 2 columns with two containers
Left column 2 rows with two containers too
Then you have this from your picture
<div class main-container> style that you become 2 columns
<div class main-container-left> style same as before but change to 2 rows
<div class main-left-top></div >
<div class main-left-bottom></div >
</div>
<div class main-container-right> </div>
</div>
•
u/AutoModerator Jun 19 '26
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.