CODEWITHSUNDEEP
htmlcssangularcss-grid
Patricio Vargas
Patricio Vargas

Reputation: 5522

CSS Grid not working as expected with rows

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 enter image description here

Upvotes: 1

Views: 15530

Answers (3)

Patricio Vargas
Patricio Vargas

Reputation: 5522

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;
   }

Upvotes: 3

Mike G
Mike G

Reputation: 668

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>

Upvotes: 1

Francisco Arleo
Francisco Arleo

Reputation: 221

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>

Upvotes: 2

Related Questions