Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text
#top .twelve-special-grid .entry-content-wrapper {
display: grid;
gap: 20px;
grid-template-columns: repeat(12, 1fr); /* === so we have 12 cells in a row with the same fraction === */
grid-auto-rows: 1fr;
}
/*** Remove distracting elements (including pseudo elements) ***/
#top .twelve-special-grid .entry-content-wrapper:before,
#top .twelve-special-grid .entry-content-wrapper:after {
display: none;
}
/*** Now determine the position and width ( by cell width ) of the elements. ***/
.twelve-special-grid .entry-content-wrapper div:nth-child(1 of .flex_column) { grid-column: 1 / span 8 } /*** starts on line 1, has width of 8 cells ***/
.twelve-special-grid .entry-content-wrapper div:nth-child(2 of .flex_column) { grid-column: 9 / span 4 }
.twelve-special-grid .entry-content-wrapper div:nth-child(3 of .flex_column) { grid-column: 1 / span 12 }
.twelve-special-grid .entry-content-wrapper div:nth-child(4 of .flex_column) { grid-column: 1 / span 3 }
.twelve-special-grid .entry-content-wrapper div:nth-child(5 of .flex_column) { grid-column: 4 / span 3 }
.twelve-special-grid .entry-content-wrapper div:nth-child(6 of .flex_column) { grid-column: 7 / span 3 }
.twelve-special-grid .entry-content-wrapper div:nth-child(7 of .flex_column) { grid-column: 10 / span 3 }
#top .twelve-special-grid .entry-content-wrapper .flex_column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: unset;
margin: 0;
padding: 10px;
}grid-column: 1 / span 12;
/* === is shortform for : === */
grid-column-start: 1;
grid-column-end: span 12;
/* === that means the column starts at line number 1 and spans across 12 items width === */
/* === you can then set media-queries for different look === */
@media only screen and (max-width: 989px) {
.twelve-special-grid .entry-content-wrapper div:nth-child(1 of .flex_column) { grid-column: 1 / span 8 }
.twelve-special-grid .entry-content-wrapper div:nth-child(2 of .flex_column) { grid-column: 9 / span 4 }
.twelve-special-grid .entry-content-wrapper div:nth-child(3 of .flex_column) { grid-column: 1 / span 12 }
.twelve-special-grid .entry-content-wrapper div:nth-child(4 of .flex_column) { grid-column: 1 / span 6 }
.twelve-special-grid .entry-content-wrapper div:nth-child(5 of .flex_column) { grid-column: 7 / span 6 }
.twelve-special-grid .entry-content-wrapper div:nth-child(6 of .flex_column) { grid-column: 1 / span 6 }
.twelve-special-grid .entry-content-wrapper div:nth-child(7 of .flex_column) { grid-column: 7 / span 6 }
}