I've recently started experimenting with CSS grid and I have to say, it's pretty amazing! I'm currently working on a basic layout for mobile devices and using media queries to adjust the layout as the screen size increases.
At the moment, my layout consists of three areas: the content area, the sidebar area, and the optional commenting area. There is a gap of 40px between these areas.
Here is the CSS for the mobile layout:
.grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-gap: 40px;
}
If the commenting area is not present, I do not want the gap for it to be displayed.
As the page grows in size, I'm changing the layout using media queries like this:
@media screen and (min-width: 768px) {
.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
.comments {
grid-area: comment;
}
.grid {
grid-template-columns: 1fr 300px;
grid-template-rows: auto;
grid-template-areas:
"content sidebar"
"comment sidebar";
}
}
When the comment area is not present, the 40px gap should also be removed.
I've considered creating a class to handle this, but I'm wondering if there's a simpler way to achieve this using just grid options. Any suggestions?