CODEWITHSUNDEEP
cssgrid
warCommander
warCommander

Reputation: 449

how to give grid 2 columns instead of 1 in css

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

enter image description here

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

Upvotes: 0

Views: 153

Answers (1)

Mads Hansen
Mads Hansen

Reputation: 976

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

Upvotes: 1

Related Questions