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