Angular5中如何不指定具体行列设置CSS Grid子元素的跨行列尺寸？

当然可以实现！这种按行列数控制元素尺寸的需求，用CSS Grid布局来处理简直是量身定做，完全不需要硬写具体的像素或百分比数值，直接基于网格的行列单位就能轻松搞定。结合你Angular 5动态加载对象的场景，我给你整理了一套完整的实现方案：

1. 先设置网格容器 #

首先把承载动态对象的父容器改成Grid布局，比如给它加个.grid-container类：

.grid-container {
  display: grid;
  /* 让列自动填充容器，每列最小200px，多余空间均分 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 设置默认行高，作为基础单元格的高度 */
  grid-auto-rows: 150px;
  /* 可选：给网格元素之间加间距 */
  gap: 10px;
}

这里的fr是Grid特有的单位，代表“可用空间的份数”，auto-fill会自动根据容器宽度调整列数，非常适合动态布局的场景。

2. 定义.long和.wide类 #

接下来直接用Grid的跨度属性，就能让元素按你想要的行列数占据空间：

/* 跨越3行高，1列宽 */
.long {
  grid-row: span 3;
}

/* 跨越3列宽，1行高 */
.wide {
  grid-column: span 3;
}

span 3的意思就是“占据当前位置开始的3个网格轨道”，完全不用指定具体的起始或结束行列，简单直接！

3. Angular中动态应用类 #

在Angular 5里，你可以通过[ngClass]指令，根据动态对象的属性来自动添加对应的类。比如假设你的对象数组里有个sizeType字段，用来标记元素应该是普通尺寸、long还是wide：

<div class="grid-container">
  <div 
    *ngFor="let item of dynamicItems"
    [ngClass]="{
      'long': item.sizeType === 'long',
      'wide': item.sizeType === 'wide'
    }"
  >
    {{ item.content }}
  </div>
</div>

这样当你动态加载对象时，元素就会自动应用对应的尺寸样式了。

小提示 #

• 如果你的网格是固定列数（比如明确是4列），grid-column: span 3依然有效，会准确占据3列的空间。
• 要是担心长内容溢出，可以给.long和.wide类加上overflow: auto，或者把grid-auto-rows改成min-content，让行高自适应内容。

内容的提问来源于stack exchange，提问作者Siebe