Grid Container Properties
Display
Purpose: defines the grid container and specifies formatting context.
Values: grid, inline-grid, subgrid
Define the Tracks
Grid-template-columns
Purpose: define the columns within the grid.
Values: track-size is defined as a unit of measure, such as px, %, or fraction of free space within grid using the fr unit. Auto is also a valid value. Other units may also work. Line names may also be defined.
Grid-template-rows
Purpose: define the rows within the grid.
Values: track-size is defined as a unit of measure, such as px, %, or fraction of free space within grid using the fr unit. Auto is also a valid value. Other units may also work. In addition we can define line names here.
Grid-template
Purpose: shorthand for grid-template columns, grid-template-rows, and grid-template-areas. Note that this does not reset the implicit properties: consider using grid instead.
Grid
Purpose: Shorthand for setting grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. Can also restore grid-column-gap and grid-row-gap to initial values.
Note: if you use this to replace grid-template-rows and grid-template-columns, use the format Grid: row row / column column;
Grid-template-areas
Purpose: This element, used with grid-area, defines the grid layout using names.
Grid-template-areas: “name name name” “name . name” the . represents an empty space. This creates a grid with 2 rows and 3 columns.
Define Implicit Tracks
Grid-auto-columns
Purpose: specifies the size of automatically generated (implicit) grid tracks which are created when we position rows and columns that fall outside our defined range. Essentially this specifies the size of the empty columns.
Grid-auto-rows
Purpose: specifies the size of automatically generated (implicit) grid tracks which are created when we position rows and columns that fall outside our defined range. Essentially this specifies the size of the empty rows.
Grid-auto-flow
Purpose: controls how items are positioned if you fail to specify a location. Row adds a row, column adds a column, and dense fills in empty spaces.
Values: row, column, dense
Associated Keywords
Repeat
Purpose: This is actually a keyword used with grid-template-columns and grid-template rows. Repeat allows us to create multiple columns or rows without specifying each one individually. For example, the statement grid-template-columns: 100px 100px 100px 100px is the same as grid-template-columns: repeat(4, 100px).
Auto-Fill
Auto-fill is a keyword used within repeat. This keyword fills the grid container with as many columns as possible, without overflowing the container. Example: repeat(auto-fill, 100px).
Auto-Fit
Auto-fit is a keyword used within repeat. This keyword is very similar to auto-fill, however auto-fit only creates as many tracks (columns or rows) as necessary.
MinMax
Minmax is typically used with the repeat and auto-fill or auto-fit keywords. This allows the designer to specify the minimum and maximum track width for implicit tracks.
Define the Gaps Between Tracks
Grid-column-gap
Purpose: sets size of grid lines
Values: a length value
Grid-row-gap
Purpose: sets size of grid lines
Values: a length value
Grid-gap
Purpose: shorthand for grid-column-gap & grid-row-gap
Values: length values
Control Alignment and Justification
Justify-content
Purpose: Used to align the grid within the grid container. Provides alignment along the column axis
Values: start, end, center, stretch, space-around, space-between, space-evenly
Align-content
Purpose: Used to align grid within the grid container. Provides alignment along the row axis. Values: start, end, center, stretch, space-around, space-between, space-evenly
Justify-items
Purpose: align content within a grid item along the column axis (horizontal alignment)
Values: start, end, center, stretch
Align-items
Purpose: align content within a grid item along the row axis (vertical alignment)
Values: start, end, center, stretch
Grid Item Properties
Grid-column-start
Purpose: determines location of a grid item within the grid by referring to grid lines Values: line number or name May use span and auto keywords
Span number or name to indicate columns spanned Auto (to indicate automatic placement, span, or default span)
Grid-column-end
Purpose: determines location of a grid item within the grid by referring to grid lines
Values: line number or name
May use span and auto keywords
Grid-row-start
Purpose: determines location of a grid item within the grid by referring to grid lines
Values: line number or name
May use span and auto keywords
Grid-row-end
Purpose: determines location of a grid item within the grid by referring to grid lines
Values: line number or name
May use span and auto keywords
Grid-column
Purpose: shorthand for grid-column-start & grid-column-end
Values: start line / end line (may use line names)
May use span and auto keywords
Grid-row
Purpose: shorthand for grid-row-start & grid-row-end
Values: start line / end line (may use line names)
May use span and auto keywords
Key Words
Span
Span number or name to indicate columns spanned
Auto
Indicates automatic placement
Grid-area
Purpose: Define a grid item by name. Essentially we can use this statement to provide a name, along with row and column beginning and end values, to a region. This must be used with grid-template-areas.
Values: name / row-begin / column-begin / row-end / column-end
Justify-self
Purpose: align content inside a grid item along the column axis
Values: start, end, center, stretch
Align-self
Purpose: align content inside a grid item along the row axis
Values: start, end, center, stretch
Note: There are other commands not yet included here.
