Colunas de sobreposição de grade do Intlat
article {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 50px;
grid-gap: 5px;
}
section:nth-child(1) { grid-column: 1 / 4; grid-row: 1; z-index: 1; }
section:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
section:nth-child(3) { grid-column: 5 / 7; grid-row: 1; }
@media ( max-width: 500px ) {
article { grid-template-columns: 100px; justify-content: center; }
section:nth-child(1) { grid-row: 1 / 4; grid-column: 1; }
section:nth-child(2) { grid-row: 3 / 5; grid-column: 1; }
section:nth-child(3) { grid-row: 5 / 7; grid-column: 1; }
}
/* non-essential demo styles */
section:nth-child(1) { background-color: lightgreen; }
section:nth-child(2) { background-color: orange; }
section:nth-child(3) { background-color: aqua; }
section {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
Energetic Eel