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);
}
}