I am currently building a layout with CSS grid which can contain multiple columns and rows. An element in a row can be either single or split. I would like the elements in a row to have the same height. No matter how much text is inserted. Unfortunately it doesn't work with my solutions the way I want it to. Just have a look at my example. Maybe you can give me a hint. Thanks
.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>
You may use the flex
layout and flex-grow
propertie to avoid sizing your elements.
Possible example:
.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>