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

其他-高度相等的CSS网格线

(其他 - Css grid lines with equal height)

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

我目前正在使用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>
Questioner
Sven S.
Viewed
11
G-Cyrillus 2020-12-02 23:49:10

你可以使用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>