CSS grid - Make column width consistent for repeating rows regardless of content width

user_3717114 0
Viewed 589

I have the following css grid that does not keep same width for repeating rows. the data in each cell could have varying length. How to keep the width the same for all repeating rows ?

I want column 1 to be 10% width, Column 2 to be 45% and remaining for column 3. This is why I use:

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 data user-container 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>

css-grid css
2 Answers

created and fixed the width for user-l user-m user-r and added grid-template-columns: 10% 45% 1fr; which will provide the size of the 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>

user_56807300

This code below should fix the issue. Answer is based on comments above from 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>

user_42823660
Related