css - CSS网格不同的列数

Question

我想制作一个具有不同列大小的网格（'ITEM = V' 覆盖所有宽度 'ITEM A' 或 'P' 或 'T' 覆盖网格宽度的每个 50%），如图所示。有什么帮助吗？

我已经尝试解决这个问题一个星期了。这真的有什么问题。（视频应该分两列）

<div  class="grid-container">
    <div *ngFor="let media of allMedia">
      <div *ngIf="media.type==='V'" class="item1">
        {{media.title}}
      </div>
      <div *ngIf="media.type==='A'" >
         {{media.title}}
      </div>
      <div *ngIf="media.type==='P'" >**Bold Text Here**
        {{media.title}}
      </div>
      <div *ngIf="media.type==='T'">
        {{media.title}}
      </div>
    </div>
  </div>

CSS

   .grid-container {
     display: grid;
     background-color: #2196F3;
     grid-template-columns: 50% 50%;
  }


  .item1 {
     grid-area:  2 / 1 /  span  2 / span 2 !important;
    border-style:solid;
    text-align:center
   }

标签： csssass

Answer 1

It'd be best to use display: grid; for something like this.

You'd have to add unique classes/id's for the children elements and then set the grid-area property on each of them.

The layout of grid-area is:

grid-area: row-start / column-start / row-end / column end;

You can also use shorthand if two properties have the same value:

grid-area: 2 / 1
/* Equates to: */
grid-area: 2 / 1 / 2 / 1

Example:

.outer-grid {
  display: grid;
  height: 100vh;
}

.newspaper1 {
  grid-area: 1 / 3 / 2 / 1;
  border-style: solid;
}

.newspaper2 {
  grid-area: 2 / 1;
  border-style: solid;
}

.newspaper3 {
  grid-area: 2;
  border-style: solid;
}

.newspaper4 {
  grid-area: 3 / 1;
  border-style: solid;
}

.newspaper5 {
  grid-area: 3 / 2;
  border-style: solid;
}

.newspaper6 {
  grid-area: 4 / 3 / 4 / 1;
  border-style: solid;
}

<div class="outer-grid">
  <div *ngIf="item==='V'" class="newspaper1">
    some content
  </div>
  <div *ngIf="item==='A'" class="newspaper2">
    some content
  </div>
  <div *ngIf="item==='P'" class="newspaper3">
    some content
  </div>
  <div *ngIf="item==='T'" class="newspaper4">
    some content
  </div>
  <div *ngIf="item==='A'" class="newspaper5">
    some content
  </div>
    <div *ngIf="item==='V'" class="newspaper6">
    some content
  </div>
</div>

Here's a good interface for learning CSS Grid if you want to learn more: https://alialaa.github.io/css-grid-cheat-sheet/