CSS Grid не работает должным образом со строками - PullRequest
Новая
       7

CSS Grid не работает должным образом со строками

0 голосов
/ 28 декабря 2018

Я пытаюсь выполнить сетку, в которой 4-й столбец находится в первой и второй строке , не опуская второй ряд ниже.

div с class news7 это тот, который должен занимать 2 строки, но когда он это делает, он выталкивает другие элементы во втором ряду под ним, потому что я установил высоту 600 пикселей, остальные элементы имеют 300 пикселей.

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

РЕЗУЛЬТАТ enter image description here

Ответы [ 3 ]

0 голосов
/ 28 декабря 2018

Вот упрощенный фрагмент, который делает то, что вы хотите.Он по-прежнему использует сетку 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>
0 голосов
/ 28 декабря 2018

Я исправил свою проблему.

Проблема заключалась в том, как я настроил сетку и как 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;
   }
0 голосов
/ 28 декабря 2018

Я сделал скрипку, надеюсь, это поможет.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>
...