Is there a way to ensure that a CSS grid maintains the same width for repeating rows, even if the content in each cell varies in length?
I am attempting to set column 1 to be 10% width, column 2 to be 45% width, and allocate the remaining space to column 3. To achieve this, I have used the following code:
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'
The user-container data is repeated for "n" number of users.
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>