.grid.grid--alpha
.item 1
.item 2
.item 3
.item 4
.item.item--alpha 5
.item 6
.grid.grid--beta
.item 1
.item 2
.item 3
.item.item--alpha 4
View Compiled
.grid {
display: grid;
gap: 1rem;
max-width: 50em;
margin: 1rem auto;
}
.grid--alpha {
grid-template-columns: repeat(4, 1fr);
}
.grid--beta {
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: dodgerblue;
color: gold;
font-size: 3rem;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
}
.item--alpha {
grid-column-start: 2;
border: 1rem solid wheat;
~ .item {
border: 1rem solid wheat;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.