Question

我正在尝试完成一个网格，该网格的第4列位于第一行和第二行中，而无需将第二行向下推。

带有div的{{1}}应该占用2行，但是当它执行时，它会将第二行中的其他元素推到它下面的第二行，因为我将高度设置为600px，其他元素是300px。

HTML

class news7

CSS

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

结果

Answer 1

我做了一个小提琴，希望对您有所帮助。 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>

Answer 2

我已解决问题。

问题是我进行网格设置的方式以及Angular生成组件的方式。

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

Answer 3

这是一个简化的代码段，可以满足您的需求。它仍然使用css网格，但不使用模板区域，而只是将新闻卡标记为两行高和两倍。

.news.double css在第四列中创建一个两行高的网格元素

.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>

CSS网格无法按预期与行一起使用

3 个答案: