我有以下css网格，重复行不保持相同的宽度。每个单元格中的数据可以有不同的长度。如何保持所有重复行的宽度相同？
我希望第1列宽度为10％，第2列为45％，第3列为剩余。这就是我使用的原因：
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”个用户重复数据user-container。
body {margin: 0}
.user-l {grid-area:user-l}
.user-m {grid-area:user-m}
.user-r {grid-area:user-r}
.user-container {
display: grid;
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'
}
.user-l,
.user-m,
.user-r {
border: 1px solid #ddd;
padding: 20px;
}
.user-l {background-color: #2196F3}
.user-m {background-color: #219683}
.user-r {background-color: #216683}<h1>Grid Elements - How to keep width the same ?</h1>
<p>In the example below, blue and green should have the same width all the time. </p>
<div class="user-container">
<div class="user-l">
<p>Name: jsdsdsd djsds</p>
</div>
<div class="user-m">
<p>Age: 23</p>
</div>
<div class="user-r">
<p>Occupation: Doctor</p>
</div>
</div>
<div class="user-container">
<div class="user-l">
<p>Name: ANother longer Names</p>
</div>
<div class="user-m">
<p>Age: 23</p>
</div>
<div class="user-r">
<p>Occupation: Another Occupation</p>
</div>
</div>创建并修复了user-l user-m user-r的宽度并添加了grid-template-columns: 10% 45% 1fr;，它将提供div的大小
body {margin: 0}
.user-l {grid-area:user-l}
.user-m {grid-area:user-m}
.user-r {grid-area:user-r}
.user-container {
display: grid;
grid-template-columns: 10% 45% 1fr;
grid-template-areas:
'user-l user-m user-r'
}
.user-l,
.user-m,
.user-r {
border: 1px solid #ddd;
padding: 20px;
}
.user-l {background-color: #2196F3; }
.user-m {background-color: #219683;}
.user-r {background-color: #216683;}<h1>Grid Elements - How to keep width the same ?</h1>
<p>In the example below, blue and green should have the same width all the time. </p>
<div class="user-container">
<div class="user-l">
<p>Name: jsdsdsd djsds</p>
</div>
<div class="user-m">
<p>Age: 23</p>
</div>
<div class="user-r">
<p>Occupation: Doctor</p>
</div>
</div>
<div class="user-container">
<div class="user-l">
<p>Name: ANother longer Names</p>
</div>
<div class="user-m">
<p>Age: 23</p>
</div>
<div class="user-r">
<p>Occupation: Another Occupation</p>
</div>
</div>下面的代码应该可以解决问题。答案基于上述VXp的评论
<!DOCTYPE html>
<html>
<head>
<style>
.user-container { display: grid;}
.user-container {
grid-template-columns: 10% 45% 1fr;
}
.user-l {
background-color: #2196F3;
border: 1px solid #ddd;
padding 20px;
}
.user-m {
background-color: #219683;
border: 1px solid #ddd;
padding 20px;
}
.user-r {
background-color: #216683;
border: 1px solid #ddd;
padding 20px;
}
</style>
</head>
<body>
<h1>Grid Elements - How to keep width the same ?</h1>
<p>In the example below, blue and green should have the same width all the time. </p>
<div class="user-container">
<div class="user-l">
<p>Name: jsdsdsd djsds</p>
</div>
<div class="user-m">
<p>Age: 23</p>
</div>
<div class="user-r">
<p>Occupation: Doctor</p>
</div>
</div>
<div class="user-container">
<div class="user-l">
<p>Name: ANother longer Names</p>
</div>
<div class="user-m">
<p>Age: 23</p>
</div>
<div class="user-r">
<p>Occupation: Another Occupation</p>
</div>
</div>
</body>
</html>