Warm tip: This article is reproduced from serverfault.com, please click

Css grid lines with equal height

发布于 2020-12-02 15:22:47

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>
Questioner
Sven S.
Viewed
0
G-Cyrillus 2020-12-02 23:49:10

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>