First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it's intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
Terminology:
Grid Container: The element on which display: grid is applied.
Grid Item: The children (i.e. direct descendants) of the grid container.
Grid Line: The dividing lines that make up the structure of the grid.
Grid Track: The space between two adjacent grid lines.
Grid Cell: The space between two adjacent row and two adjacent column grid lines.
Grid Area: The total space surrounded by four grid lines.
Properties for the Grid Container:
- display: Defines the element as a grid container and establishes a new grid formatting context for its contents.
- values: grid, inline-grid
- grid-template-columns, grid-template-rows: Defines the columns and rows of the grid with a space-separated list of values.
- values: <track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit), <line-name> - an arbitrary name of your choosing.
- 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:
- grid-template-areas: Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
- values: <grid-area-name> - the name of a grid area specified with grid-area
- grid-template: A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.
- grid-column-gap, grid-row-gap: Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows. Shorthand: grid-gap
- justify-items: Aligns grid items along the inline (row) axis (as opposed to align-items which aligns along the block (column) axis). This value applies to all grid items inside the container.
- align-items: Aligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline (row) axis). This value applies to all grid items inside the container.
- place-items: sets both the align-items and justify-items properties in a single declaration.
- justify-content: This property aligns the grid along the inline (row) axis (as opposed to align-content which aligns the grid along the block (column) axis).
- values: start, end, center, stretch, space-around, space-between, space-evenly
- align-content: This property aligns the grid along the block (column) axis (as opposed to justify-content which aligns the grid along the inline (row) axis).
- place-content: place-content sets both the align-content and justify-content properties in a single declaration.
- grid-auto-columns, grid-auto-rows: Specifies the size of any auto-generated grid tracks (aka implicit grid tracks).
- grid-auto-flow: If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.
- grid: A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow
Properties for the Grid Items:
- grid-column-start, grid-column-end, grid-row-start, grid-row-end: Determines a grid item's location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.
- grid-column, grid-row: Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.
- grid-area: Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.
- justify-self: Aligns a grid item inside a cell along the inline (row) axis (as opposed to align-self which aligns along the block (column) axis). This value applies to a grid item inside a single cell.
- align-self: Aligns a grid item inside a cell along the block (column) axis (as opposed to justify-self which aligns along the inline (row) axis). This value applies to the content inside a single grid item.
