A Full Information to CSS Grid | CSS-Methods

grid-template-columns
grid-template-rows

Defines the columns and rows of the grid with a space-separated checklist of values. The values symbolize the monitor dimension, and the house between them represents the grid line.

Values:

• <track-size> – is usually a size, a share, or a fraction of the free house within the grid utilizing the fr unit (more on this unit over at DigitalOcean)
• <line-name> – an arbitrary title of your selecting

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Grid traces are mechanically assigned optimistic numbers from these assignments (-1 being an alternate for the final row).

However you may select to explicitly title the traces. Notice the bracket syntax for the road names:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Notice {that a} line can have multiple title. For instance, right here the second line could have two names: row1-end and row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

In case your definition incorporates repeating elements, you should use the repeat() notation to streamline issues:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Which is equal to this:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

If a number of traces share the identical title, they are often referenced by their line title and depend.

.merchandise {
  grid-column-start: col-start 2;
}

The fr unit permits you to set the scale of a monitor as a fraction of the free house of the grid container. For instance, this may set every merchandise to at least one third the width of the grid container:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

The free house is calculated after any non-flexible objects. On this instance the entire quantity of free house accessible to the fr models doesn’t embrace the 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}