.grid {
margin: 1em;
border: solid lightgray;
background: lightgray;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 2px;
counter-reset: div;
}
.grid div {
border: solid;
text-align: center;
}
.grid div:before {
counter-increment: div;
content: 'N°' counter(div);
}
.grid div[class]:after {
display: block;
text-align: center;
background: lightblue;
content: "Class applied : "attr(class);
color: crimson;
}
.col-2 {
grid-column: auto/span 2;
}
.col-3 {
grid-column: auto/span 3;
}
.col-6 {
grid-column: auto/span 6;
}
.col-8 {
grid-column: auto/span 8;
}
.row-2 {
grid-row: auto/span 2;
}