在 angular 中，组件默认会生成一个宿主元素（如 `
当使用 CSS Grid 构建表格式布局时，Grid 容器（display: grid）仅将其直接子元素视为网格项（grid items）。而 Angular 组件默认渲染为一个包裹 DOM 元素（如 解决方法非常简洁：在组件的样式中为宿主元素启用 display: contents： ✅ 效果： ⚠️ 注意事项： 立即学习“前端免费学习笔记（深入）”； ? 进阶提示：若需更灵活的行结构（如动态列数、响应式列宽），可结合 @Input() 传递列配置，并在模板中用 *ngFor 渲染，依然保持 display: contents 确保布局穿透性。 总结：display: contents 是 Angular 中实现“无侵入式组件封装”的黄金方案，尤其适用于 Grid/Flex 布局、表单分组、列表项抽象等场景——它让组件真正成为视图逻辑的组织单元，而非 DOM 结构的干扰者。@Component({
selector: 'app-row-component',
template: `
<div>Row {{row}} Col 1</div>
<div>Row {{row}} Col 2</div>
`,
styles: [':host { display: contents; }'] // ✅ 关键：移除宿主元素的布局影响
})
export class AppRowComponent {
@Input() row!: number;
}
