What is the track Listing and grid track in the grid layout?

Question

I read the documentation of Mozilla but I could not understand very well what would be the grid track and nor the track Listing, someone could explain in a simpler and intuitive way what would be this ?

Answer 1

Grid Tracks

We define rows and columns on our grid with the properties grid-template-columns and grid-template-rows. That defines the grid Tracks. A grid track is the space between two lines in a grid. In the image below you can see a track Highlighter - the track in the first line of our grid.

Grid track is a Generic term for a grid column or grid row

---

none | <track-list> | <auto-track-list>

These properties specify, as a track-list space-separated, line names and grid sizing functions. The property grid-template-columns specifies the list of Tracks for Columns, as long as the grid-template-rows specifies the track-list to the Rows.

Large grids with many Tracks can use repeat() notation to repeat all or a section of track Listing. For example the following grid definition:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Official documentation W3C: https://www.w3.org/TR/css-grid-1/#track-list

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout