how to give grid 2 columns instead of 1 in css - css

Question

Im using css grids for my project.
I have this css for the page
.App {
text-align: center;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
height: 100vh;
}
.grid-item {
background-color: rgba(0, 0, 0, 0.8);
border: 0.5px dotted rgba(255, 255, 255, 0.8);
padding: 20px;
color: white;
text-align: center;
}
and here is my layout
I want the grids where the calendar is shown to be just one grid with 2 rows span. Sorry, i know this is a stupid question but I'm not very good at styling

Answer 1

You could do it by defining grid-template-areas on the parent and placing the specific div in the wanted area using grid-area.
.app {
text-align: center;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
height: 100vh;
/* Naming the grid areas */
grid-template-areas:
"weather clock spotify"
"calendar mic number"
"calendar message feed";
}
.grid-item {
background-color: rgba(0, 0, 0, 0.8);
border: 0.5px dotted rgba(255, 255, 255, 0.8);
padding: 20px;
color: white;
text-align: center;
}
/* Instead if using nth-of-type you should add a custom class to the specific html element if it's possible. */
.app > div:nth-of-type(4) {
background-color: red;
/* Place the element in the desired area. */
grid-area: calendar;
}
You didn't include your HTML structure. But I imagine it'll look something like this.
<div class="app">
<div class="grid-item">
city weather
</div>
<div class="grid-item">
Clock
</div>
<div class="grid-item">
Spotify
</div>
<div class="grid-item">
Calendar
</div>
<div class="grid-item">
Mic
</div>
<div class="grid-item">
Some number
</div>
<div class="grid-item">
Message
</div>
<div class="grid-item">
Text feed
</div>
</div>
CSS Tricks has a quick overview on using css grid with template areas. https://css-tricks.com/snippets/css/complete-guide-grid/#grid-template-areas