CSS 网格 - 无论内容宽度如何，重复行的列宽都保持一致

Question

我有以下 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'

数据 user-container 为“n”个用户重复。

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>

Answer 1

创建并修复了 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>