我有一个CSS网格,重复的行宽度不同。每个单元格中的数据长度可能会有所不同。如何使所有重复行的宽度相同?
我希望第一列宽度为10%,第二列宽度为45%,剩余的为第三列。这就是我使用以下代码的原因:
我希望第一列宽度为10%,第二列宽度为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'
数据 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>