我目前正在使用CSS网格构建一个可以包含多个列和行的布局。行中的元素可以是单个元素也可以是拆分元素。我希望连续的元素具有相同的高度。无论插入多少文本。不幸的是,它不适用于我想要的解决方案。看看我的例子。也许你可以给我一个提示。谢谢
.grid-container {
display: grid;
grid-template-columns: repeat(5,250px);
background-color: #293846;
}
.grid-container > div {
text-align: center;
margin: 5px;
}
.grid-container > div > span {
display: block;
}
.br-full {
border-radius: 10px;
height: 100%;
}
.br-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
max-height: 50%;
}
.br-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height: 50%;
}
.green-element {
background-color: #00c303;
color: #FFF;
}
.red-element {
background-color: #ff0000;
color: #FFF;
}
.orange-element {
background-color: #ff7600;
color: #FFF;
}
.grey-element {
background-color: #888888;
color: #FFF;
}
<div class="grid-container">
<div><span class="green-element br-full">TW AHB 2019</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">Haftpflicht</span></div>
<div><span class="grey-element br-full">Haftpflicht</span></div>
<div><span class="grey-element br-full">Teilkasko</span></div>
<div><span class="green-element br-full">Schadensquote 0 %</span></div>
<div><span class="green-element br-full">Schadensquote 0 %</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="green-element br-full">Berechnungsgrundlage:
Jahresbruttolohnsumme Werkstatt:</span></div>
<div><span class="green-element br-full">Je KFZ max. 100 TEUR
KUMUL-Schaden max. 500 TEUR
Max. SB bei KUMUL 10 TEUR</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="red-element br-full">Rotes Kennzeichen</span></div>
<div>
<span class="grey-element br-top">Nicht zugelassenes KFZ</span>
<span class="green-element br-bottom">Zugelassenes KFZ</span>
</div>
<div>
<span class="grey-element br-top">Nicht versichert!</span>
<span class="grey-element br-bottom">Nicht versichert!</span>
</div>
<div>
<span class="grey-element br-top">Nicht versichert!</span>
<span class="grey-element br-bottom">Nicht versichert!</span>
</div>
<div>
<span class="grey-element br-top">Nicht versichert!</span>
<span class="red-element br-bottom">Nicht versichert!<br /> Oder doch??</span>
</div>
</div>
你可以使用flex
布局和flex-grow
属性避免调整元素大小。
可能的例子:
.grid-container {
display: grid;
grid-template-columns: repeat(5,250px);
background-color: #293846;
/* grid-auto-rows:1fr; *//* to even the rows */
}
.grid-container > div {
text-align: center;
margin: 5px;
display:flex;
flex-direction:column;
}
.grid-container > div > span {
display: block;
flex-grow:1;
}
.br-full {
border-radius: 10px;
}
.br-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.br-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.green-element {
background-color: #00c303;
color: #FFF;
}
.red-element {
background-color: #ff0000;
color: #FFF;
}
.orange-element {
background-color: #ff7600;
color: #FFF;
}
.grey-element {
background-color: #888888;
color: #FFF;
}
<div class="grid-container">
<div><span class="green-element br-full">TW AHB 2019</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">Haftpflicht</span></div>
<div><span class="grey-element br-full">Haftpflicht</span></div>
<div><span class="grey-element br-full">Teilkasko</span></div>
<div><span class="green-element br-full">Schadensquote 0 %</span></div>
<div><span class="green-element br-full">Schadensquote 0 %</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="green-element br-full">Berechnungsgrundlage:
Jahresbruttolohnsumme Werkstatt:</span></div>
<div><span class="green-element br-full">Je KFZ max. 100 TEUR
KUMUL-Schaden max. 500 TEUR
Max. SB bei KUMUL 10 TEUR</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="grey-element br-full">-</span></div>
<div><span class="red-element br-full">Rotes Kennzeichen</span></div>
<div>
<span class="grey-element br-top">Nicht zugelassenes KFZ</span>
<span class="green-element br-bottom">Zugelassenes KFZ</span>
</div>
<div>
<span class="grey-element br-top">Nicht versichert!</span>
<span class="grey-element br-bottom">Nicht versichert!</span>
</div>
<div>
<span class="grey-element br-top">Nicht versichert!</span>
<span class="grey-element br-bottom">Nicht versichert!</span>
</div>
<div>
<span class="grey-element br-top">Nicht versichert!</span>
<span class="red-element br-bottom">Nicht versichert!<br /> Oder doch??</span>
</div>
</div>