A Complete Guide To Grid - CSS-Tricks

Trang chủ » Html Grid Column » A Complete Guide To Grid - CSS-Tricks

Có thể bạn quan tâm

grid-template-columnsgrid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

  • <track-size> – can be a length, a percentage, or a fraction of the free space in the grid using the fr unit (more on this unit over at DigitalOcean)
  • <line-name> – an arbitrary name of your choosing
.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 lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).

But you can choose to explicitly name the lines. Note the bracket syntax for the line 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]; }
Grid with user named lines

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

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

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

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

Which is equivalent to this:

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

If multiple lines share the same name, they can be referenced by their line name and count.

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

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

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

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn’t include the 50px:

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

Từ khóa » Html Grid Column