CSS Grid布局中如何设置.text1/.text2元素非自动缩放？

要让.text1和.text2的宽高严格匹配自身内容、不被Grid布局自动拉伸，有两种实用方案，可根据你的布局需求选择：

方案1：调整Grid轨道尺寸，适配内容大小 #

Grid的auto轨道会默认根据单元格内的最大内容拉伸尺寸，改用fit-content()或min-content定义轨道，能让轨道仅容纳自身内容的宽度/高度，避免被其他单元格的大内容带偏。

修改你的CSS：

.demo1,
.demo2 {
  display: grid;
  /* 用fit-content()替代auto，轨道尺寸适配内容 */
  grid-template-columns: repeat(2, fit-content(auto));
  grid-template-rows: repeat(2, fit-content(auto));
}

• 对demo1：第一行的两列会分别适配.text1和.text2的内容宽度，不会被下方跨列的.des拉宽；
• 对demo2：第二行会适配.text2的内容高度，不会被左侧跨行的.des拉高。

方案2：给目标元素设置自对齐属性，阻止拉伸 #

如果不想修改Grid轨道的全局设置，可直接给.text1和.text2添加自对齐属性，让元素不占满单元格的可用空间，保持自身内容尺寸：

.text1, .text2 {
  /* 水平方向不拉伸，紧贴内容宽度 */
  justify-self: start;
  /* 垂直方向不拉伸，紧贴内容高度 */
  align-self: start;
}

这种方法更灵活，仅针对.text1和.text2生效，不会影响Grid轨道内其他单元格的布局逻辑。

两种方案都能实现你的需求：让.text1和.text2的宽高完全等于自身内容的尺寸，不会被Grid布局自动缩放。

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