CSS网格-使重复行的列宽一致，而不考虑内容宽度

我有下面的css网格，重复行的宽度不同。每个单元格中的数据可以有不同的长度。如何保持所有重复行的宽度相同

我希望第1列的宽度为10%，第2列的宽度为45%，第3列的宽度为45%。这就是为什么我使用：

grid-template-areas:
'user-l user-m user-m user-m user-m user-m user-m user-r user-r user-r user-r'

对于“n”个用户重复数据

用户容器

body{margin:0}
.user-l{网格区域：user-l}
.user-m{网格区域：user-m}
.user-r{网格区域：user-r}
.用户容器{
显示：网格；
网格模板区域：
'user-l user-m user-m user-m user-m user-m user-m user-r user-r user-r user-r user-r'
}
.user-l，
.user-m，
.user-r{
边框：1px实心#ddd；
填充：20px；
}
.user-l{背景色：#2196F3}
.user-m{背景色：#219683}
.user-r{背景色：#216683}

网格元素-如何保持宽度不变？
在下面的示例中，蓝色和绿色应该始终具有相同的宽度

名称：JSDSD djsds

年龄:23

职业：医生

名字：另一个更长的名字

年龄:23

职业：另一种职业

创建并固定了

user-l user-m user-r

的宽度，并添加了

网格模板列：10%45%1fr它将提供div的大小
body{margin:0}
.user-l{网格区域：user-l}
.user-m{网格区域：user-m}
.user-r{网格区域：user-r}
.用户容器{
显示：网格；
网格模板列：10%45%1fr；
网格模板区域：
“user-l user-m user-r”
}
.user-l，
.user-m，
.user-r{
边框：1px实心#ddd；
填充：20px；
}
.user-l{背景色：#2196F3；}
.user-m{背景色：#219683；}
.user-r{背景色：#216683；}
网格元素-如何保持宽度不变？
在下面的示例中，蓝色和绿色应该始终具有相同的宽度

名称：JSDSD djsds

年龄:23

职业：医生

名字：另一个更长的名字

年龄:23

职业：另一种职业

下面的代码应该可以解决这个问题。答案基于VXp的上述评论



.user容器{display:grid；}
.用户容器{
网格模板列：10%45%1fr；
}
.user-l{
背景色：#2196F3；
边框：1px实心#ddd；
填充20px；
}
.user-m{
背景色：#219683；
边框：1px实心#ddd；
填充20px；
}
.user-r{
背景色：#216683；
边框：1px实心#ddd；
填充20px；
}
网格元素-如何保持宽度不变？
在下面的示例中，蓝色和绿色应该始终具有相同的宽度

名称：JSDSD djsds

年龄:23

职业：医生

名字：另一个更长的名字

年龄:23

职业：另一种职业

删除网格模板区域/网格区域并添加网格模板列：重复（3，1fr）@VXp可以使3列宽度相等，对吗？我希望第1列的宽度为10%，第2列的宽度为45%，第3列的宽度为45%。是的，然后添加：网格模板列：10%45%1fr@VXp如果移除网格区域，如何控制响应行为。对于平板电脑，我希望它一个接一个，所以它将是
网格模板列：100%100%1fr显示一列在另一列下面？您不需要任何这些，网格模板列：1fr；将使其成为1列，简单到这样，在特定的屏幕宽度上使用@media querys ofc。