Li a documentação da mozilla porém não consegui entender muito bem oque seria o grid track e nem o track listing, alguém poderia explicar de uma forma mais simples e intuitiva oque seria isso ?
1 Resposta
Grid Tracks
Definimos linhas e colunas no nosso grid com as propriedades grid-template-columns
e grid-template-rows
. Isso define o grid tracks. Um grid track é o espaço entre duas linhas em um grid. Na imagem abaixo você pode ver um track highlighter – o track na primeira linha do nosso grid.
Grid track is a generic term for a
grid column
orgrid row
none | <track-list> | <auto-track-list>
Essas propriedades especificam, como uma track-list separada por espaço, os nomes das linhas e as funções de dimensionamento do Grid. A propriedade grid-template-columns
especifica a lista de tracks para as Columns, enquanto a grid-template-rows
especifica a track-list para as Rows.
Grids grandes, com muitas tracks podem usar a notação repeat() para repetir todas ou uma seção de track listing. Por exemplo a definição de grid a seguir:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Documentação oficial W3C: https://www.w3.org/TR/css-grid-1/#track-list
Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout