Outro clássico: a grade de 12 períodos. É possível criar grades rapidamente no CSS com a função repeat()
. O uso de repeat(12, 1fr);
para as colunas do modelo de grade resulta em 12 colunas, cada uma das 1fr
.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Agora você tem uma grade de rastreamento de 12 colunas e pode colocar elementos filhos na grade. Uma maneira de fazer isso é colocá-los usando linhas de grade. Por exemplo, grid-column: 1 / 13
abrangeria todo o caminho da primeira linha à última (13) e abrangeria 12 colunas. grid-column: 1 / 5;
abrangeria os quatro primeiros.
Outra maneira de escrever isso é usando a palavra-chave span
. Com span
, você define a linha inicial e, em seguida, quantas colunas serão abrangidas a partir desse ponto de partida. Nesse caso, grid-column: 1 / span 12
equivale a grid-column: 1 / 13
, e grid-column: 2 / span 6
equivale a grid-column: 2 / 8
.
.child-span-12 {
grid-column: 1 / span 12;
}
<div class="parent">
<div class="span-12 section coral">Span 12</div>
<div class="span-6 section green">Span 6</div>
<div class="span-4 section yellow">Span 4</div>
<div class="span-2 section blue">Span 2</div>
</div>
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.span-12 {
grid-column: 1 / span 12;
}
.span-6 {
grid-column: 1 / span 6;
}
.span-4 {
grid-column: 4 / span 4;
}
.span-2 {
grid-column: 3 / span 2;
}
/* centering text */
.section {
display: grid;
place-items: center;
text-align: center
}