put all of your columns ( which one is not important) into a color-section – and nothing else.
Choose individual height ( we do not need the option equal height – thats done by flexbox layout)
Give a custom class to that color-section ( this will be a flex parent container ) – f.e.: flexbox-5
.flexbox-5 .entry-content-wrapper:before,
.flexbox-5 .entry-content-wrapper:after {
display: none;
}
.flexbox-5 .entry-content-wrapper {
display: flex !important;
flex-flow: row wrap;
justify-content: space-evenly;
gap: 30px 0;
}
.flexbox-5 .entry-content-wrapper .flex_column {
margin: 0 !important;
width: unset;
flex: 0 1 18%;
}
@media only screen and (max-width: 989px) {
.flexbox-5 .entry-content-wrapper .flex_column {
margin: 0;
width: unset;
flex: 0 1 45%;
}
}put all of your columns ( which one is not important) into a color-section – and nothing else.
Choose individual height ( we do not need the option equal height – thats done by flexbox layout)
Give a custom class to that color-section ( this will be a flex parent container ) – f.e.: gridbox-5
.gridbox-5 .entry-content-wrapper:before,
.gridbox-5 .entry-content-wrapper:after {
display: none;
}
.gridbox-5 .entry-content-wrapper {
margin: 0;
display: grid !important;
grid-auto-flow: row;
grid-auto-rows: auto; /*** or 1fr , if you like to have over all rows same height ***/
grid-template-columns: repeat(5,1fr);
gap: 30px;
}
.gridbox-5 .entry-content-wrapper .flex_column {
margin: 0 !important;
width: unset;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.gridbox-5 .entry-content-wrapper {
grid-template-columns: repeat(3, 1fr);
}
.gridbox-5 .entry-content-wrapper .flex_column:nth-of-type(n+4) {
position:relative;
left: calc(50% + 15px);
}
}
@media only screen and (max-width: 767px) {
.gridbox-5 .entry-content-wrapper {
grid-template-columns: repeat(2, 1fr);
}
.gridbox-5 .entry-content-wrapper .flex_column:last-of-type {
position:relative;
left: calc(50% + 15px);
}
}Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen