Helix 3 Framework: Fünf Spalten in einer Zeile?

Forelli · 23. November 2019

Guten Abend

Ich habe versucht in meinem Helix 3 Template fünf gleich grosse Spalten einzufügen. Ich scheitere aber daran, dass man immer insgesamt 12 grid beim custom layout angeben muss. Und 12 ist halt einfach nicht sehr gut teilbar durch 5, damit es gleich grosse Spalten gibt. Punkt bzw. Komma geht auch nicht.

Ich glaube ich stehe auf dem Schlauch.. Gibt es hier Helix 3 Spezialisten, die mir weiterhelfen könnte?

Danke und Gruss

Forelli

anka · 23. November 2019

Mit dem 12er-Grid kann es natürlich nicht funktionieren, aber du könntest es mit der Flexbox machen. Dafür findest du im Web jede Menge Anleitungen.

Hier ist nur eine von vielen Möglichkeiten:

CSS;

Code

.col-5 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}


@media (min-width: 720px) {
    .special-container {
        display: flex;
    }
    .col-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

Alles anzeigen

HTML:

Code

<div class="row">
    <div class="special-container">
        <div class="col-5">1111</div>
        <div class="col-5">2222</div>
        <div class="col-5">3333</div>
        <div class="col-5">4444</div>
        <div class="col-5">5555</div>
    </div>
</div>