CSS Grid not working as expected with rows

html css angular css-grid

10,619

Solution 1

I fixed my issue.

The problem was the way I had my grid setup and the way Angular generates the components.

HTML

<div class="grid-container">
    <div class="news" *ngFor="let n of (news | async)">
      <div class="news1">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news2">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news3">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news4">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news5">
     <SOME CODE></SOME CODE>
      </div>
      <div class="news6">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news7">
        <SOME CODE></SOME CODE>
      </div>
    </div>
</div>

CSS

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-areas: 'news news news news' 'news news news news' '. . . .';
    }

    .news {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: 'news1 news2 news3 news7' 'news4 news5 news6 news7';
      grid-area: news;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .news1 {
      grid-area: news1;
    }

   .
   .
   .
   .news7 {
     grid-area: news7;
   }

Solution 2

I made a fiddle, hope it helps. https://jsfiddle.net/cisco336/13Lzrco7/1/

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.main-grid {
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  background: lightcoral;
  grid-column-gap: 10px;
  grid-row-gap: 8px;
}

.new, .new:last-child {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.new {
  background: lightcyan;
}

.new:last-child {
  -ms-grid-column: 4;
  grid-column: 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  background: lawngreen;
}
/*# sourceMappingURL=css.css.map */

<body>
    <div class="main-grid">
        <div class="new">Item 1</div>
        <div class="new">Item 2</div>
        <div class="new">Item 3</div>
        <div class="new">Item 4</div>
        <div class="new">Item 5</div>
        <div class="new">Item 6</div>
        <div class="new">Item 7</div>
    </div>
</body>

Solution 3

Here is a simplified snippet that does what you want. It still uses css grid, but instead of using template areas it just marks the news card that should be two rows tall with double.

.news.double css which creates a two row tall grid element in the fourth column

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Set Row height */
  grid-auto-rows: 150px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.news {
  background-color: grey;
}

.news.double {
  background-color: blue;
  /* Place in the fourth column */
  grid-column: 4;
  /* Make two rows tall (Spans from row 1 to the beginning of row 3) */
  grid-row: 1 / 3;
}

<div class="grid-container">
    <div class="news"></div>
    <div class="news"></div>
    <div class="news"></div>
    <div class="news double"></div>
    <div class="news"></div>
    <div class="news"></div>
    <div class="news"></div>
</div>

10,619

Author by

Patricio Vargas

I am a Google Developer Expert on Angular and Web Technologies, Auth0 Ambassador, Media Developer Expert at Cloudinary, Platzi Master Coach, Women Techmaker Ambassador, Codementor, Twilio Champion, and SpringBoard mentor. GitHub: devpato Twitter: devpato Blog: https://dev.to/devpato

Updated on July 02, 2022

Comments

Patricio Vargas almost 2 years
I'm trying to accomplish a grid that the 4th column takes place in the first and second row without pushing the second row lower.

the div with the class news7 is the one that should take 2 rows, but when it does it pushes the other elements in the second row below it because I have set the height to 600px, other elements are 300px.

HTML
```
<div class="grid-container">
    <div class="news" *ngFor="let n of (news | async)">
      <div class="news1">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news2">
        <SOME CODE></SOME CODE>
      </div>
      <div class="news3">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news4">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news5">
     <SOME CODE></SOME CODE>
      </div>
      <div class="news6">
       <SOME CODE></SOME CODE>
      </div>
      <div class="news7">
        <SOME CODE></SOME CODE>
      </div>
    </div>
</div>
```
CSS
```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 'news1 news2 news3 news7' 'news4 news5 news6 news7' '. . . .';
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.news1 {
  grid-area: news1;
}

.
.
.
.news7 {
  grid-area: news7;
}
```
RESULT
- Temani Afif over 5 years
  
  what is the purpose of having this nested grid? basically the first grid is doing nothing since you have only one elment inside it
- Patricio Vargas over 5 years
  
  @TemaniAfif honestly like I mentioned I'm new to grid, so I thought that was a good way to do it, but i don't think that's giving me the problem. Thoughts?
- Patricio Vargas over 5 years
  
  @TemaniAfif I have updated my code with just one grid
- crazymatt over 5 years
  
  Not super familiar with that set up but if you know before hand that one of the columns is going to be large like that you could use grid-row-span so the 6 smaller boxes would fit next to the larger one.
- Temani Afif over 5 years
  
  it's not giving you the issue but it's useless IMO since it's only one item inside it
- Patricio Vargas over 5 years
  
  @TemaniAfif you are right. I updated question code to use one grid. Thanks for the tip.
- Temani Afif over 5 years
  
  by the way, the generated code will make the news div to be the container of all the news? or it will disapper ... if it's kept, then this div should contain all the grid properties
- Patricio Vargas over 5 years
  
  @crazymatt never used that before. I'm new to grid. so grid-row-span by default is 1 when you use grid-row-span. So i added it to thew .news7 element and didn't work ` .news7 { grid-area: news7; -ms-grid-row-span: 2; }`
- joshas over 5 years
  
  Could you add a snippet of generated HTML code? Might be that your divs do not have correct classes set.
- Patricio Vargas over 5 years
  
  @TemaniAfif yep the news part was giving me the issue. I just fix my problem I will post it as an answer for you to see what I did
- Patricio Vargas over 5 years
  
  @TemaniAfif i have posted the answer. Feel free to leave one since your comment was the one that lead me to solve my issue
Patricio Vargas over 5 years

this would work if I wasn't generating the items dynamically with ngFor for Angular. I solved my issue. Thanks tho!
Patricio Vargas over 5 years

this would work if I wasn't generating the items dynamically with ngFor for Angular. I solved my issue. Thanks tho!
Temani Afif over 5 years

and if you remove the grid properties from container you will have the same output with less of code ;)
Patricio Vargas over 5 years

@TemaniAfif I did try that and put everything all over the page hahaha