Css 等高网格线

Question

我目前正在构建一个带有 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>

Answer 1

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

Css 等高网格线

Css grid lines with equal height

css

grid