CSS - Grid

multiple <line-name>

A Grid track can have more than one line.

*grid: grid-template-rows / grid-template-columns | grid-template-areas;* syntax?

Can be the same if to change grid for grid-template. It also accepts a more complex but quite handy syntax for setting everything at once. You specify grid-template-areas, grid-template-rows and grid-template-columns, and all the other sub-properties are set to their initial values. What you're doing is specifying the line names and track sizes inline with their respective grid areas. This is easiest to describe with an example:

grid-template-areas example?

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. Powerful way to allocate the space within a grid. <grid-area-name> - The name of a grid area specified with "grid-area" . - a period signifies an empty grid cell none - no grid areas are defined .item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }

Grid Item

Direct descendants of the grid container. Sub elements of do not count.

Specification of grid template areas

Each row in your declaration needs to have the same number of cells. You can use any number of adjacent periods to declare a single empty cell.

Implicit lines

If grid item placement requires additional columns or rows to be created, the browser adds implicit lines to keep the grid structurally sound. defined through grid-auto-[keyword]: functions

*align-content:* what does? Note? Keywords (7)? (*Grid*)

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. *Note:* There must be multiple lines of items for this property to have any effect! align-content: 1) stretch 2) center 3) start - *Default value.* 4) end 5) space-between 6) space-around 7) space-evenly https://www.w3schools.com/cssref/css3_pr_align-content.asp

*align-items:* what does? Keywords (5)? (*Grid*)

The align-items property aligns the flexible container's items vertically. align-items: 1) stretch - *Default.* 2) center 3) start 4) end 5) baseline https://www.w3schools.com/cssref/css3_pr_align-items.asp https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

*align-self:* what does? Keywords (6)? (*Grid*)

The align-self property specifies the alignment for the selected item inside the flexible container. align-self: 0) auto - *Default.* The element inherits its parent container's align-items property, or "stretch" if it has no parent container 1) stretch 2) center 3) start 4) end 5) baseline https://www.w3schools.com/cssref/css3_pr_align-self.asp

Grid line

The dividing lines that make up the structure of the grid. They can be either vertical("column grid lines") or horizontal("row grid lines").

Grid Container

The element upon which display:grid is applied. The direct parent of all the grid items.

*fit-content()*

The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)). https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

What is *fr unit*?

The fr unit represents a fraction of the available space in the grid container. The free space is calculated after allocating any non-flexible items.

*grid:* what is? Keyword? Order of values (6)?

The grid property is a super shorthand property for: 1) grid: grid-template rows / grid-template-columns; 2) grid: grid-template-areas 3) grid: grid-template-rows / grid-auto-columns 4) grid: grid-auto-rows / grid-template-columns 5) grid: grid-template-rows / grid-auto-flow grid-auto-columns 6) grid: grid-auto-flow grid-auto-rows / grid-template-columns Keyword: grid: none - Default value. No specific sizing of the columns or rows https://www.w3schools.com/cssref/pr_grid.asp

*grid-area:* what is (2)? Order of properties?

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties: grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; The grid-area property can also be used to assign a name to a grid item. Named grid items can then be referenced to by the grid-template-areas property of the grid container. See examples below. *grid-area: itemname;* https://www.w3schools.com/cssref/pr_grid-area.asp

*display:* (grid specific)

grid | inline-grid | subgrid 1) grid - generates a block-level grid 2) inline-grid - generate an inline-level grid 3) subgrid - If your grid container is itself a grid item, you can use this to to indicate that you want the sizes of its row/columns to be taken from its own parent rather than specifying its own.

grid-template vs grid

it's recommended to use grid property instead of grid-template since it doesn't reset implicit grid properties.

*repeat()* values and order?

repeat(times to repeat, values) - The repeat() CSS function represents a repeated fragment of the track list. 1) auto-fill - https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ 2) auto-fit - Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed. https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

difference between naming lines and areas

Names are lined in grid-template-rows / grid-template-columns. Areas are named in gird-template-areas.

Explicit lines

Lines defined explicitly though grid-template, grid-column, grid-row, grid-area functions

*grid-auto-columns:* what does? Note? Values (7)?

The grid-auto-columns property sets a size for the columns in a grid container. *Note:* This property affects only columns with the size not set. grid-auto-columns: values; 1) auto - Default value. The size of the columns is determined by the size of the container 2) max-content - Sets the size of each column depending on the largest item in the column 3) min-content - Sets the size of each column depending on the largest item in the column 4) length - Sets the size of the columns, by using a legal length value. 5) % - Sets the size of the columns, by using a legal length value. 6) fit-content() - 7) minmax(min, max) - Sets the size of the columns, by using a legal length value. https://www.w3schools.com/cssref/pr_grid-auto-columns.asp

*grid-auto-flow:* what does? Keywords (5)?

The grid-auto-flow property controls how auto-placed items get inserted in the grid. grid-auto-flow: row | column | dense | row dense | column dense; 1) row - *Default value.* Places items by filling each row 2) column - Places items by filling each column 3) dense - Place items to fill any holes in the grid 4) row dense - Places items by filling each row and *holes* 5) column dense - Places items by filling each column and *holes* https://www.w3schools.com/cssref/pr_grid-auto-flow.asp

*grid-auto-columns:* what does? Keywords (4)?

The grid-auto-rows property sets a size for the rows in a grid container. This property affects only rows with the size not set. grid-auto-columns: auto | max-content | min-content | length; 1) auto - Default value. The size of the rows is determined by the size of the largest item in the row 2) max-content - Sets the size of each row to depend on the largest item in the row 3) min-content - Sets the size of each row to depend on the largest item in the row 4) length - Sets the size of each row to depend on the largest item in the row https://www.w3schools.com/cssref/pr_grid-auto-rows.asp

*grid-column:* what is? Order of properties?

The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties: grid-column: grid-column-start / grid-column-end; https://www.w3schools.com/cssref/pr_grid-column.asp

*grid-column-end:* what does? Values (3)?

The grid-column-end property defines how many columns an item will span, or on which column-line the item will end (see example at the end of this page). grid-column-end: auto | span n | column-line; 1) auto - Default value. The item will span one column 2) span n - Specifies the number of columns the item will span 3) column-line - Specifies on which column to end the display of the item https://www.w3schools.com/cssref/pr_grid-column-end.asp

*grid-column-gap:* what does? Value?

The grid-column-gap property defines the size of the gap between the columns in a grid layout. grid-column-gap: length; - Any legal length value, like px or %. 0 is the default value https://www.w3schools.com/cssref/pr_grid-column-gap.asp

*grid-column-start:* what does? Values (3)?

The grid-column-start property defines on which column-line the item will start. grid-column-start: auto | span n | column-line; 1) auto - Default value. The item will be placed following the flow 2) span n - Specifies the number of columns the item will span 3) column-line - Specifies on which column to start the display of the item https://www.w3schools.com/cssref/pr_grid-column-start.asp

*grid-gap* what is? Order of properties?

The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties: grid-gap: grid-row-gap grid-column-gap; https://www.w3schools.com/cssref/pr_grid-gap.asp

*grid-row:* what is? Order of properties?

The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties: grid-row: grid-row-start / grid-row-end; https://www.w3schools.com/cssref/pr_grid-row.asp

*grid-row-end:* what does? Values (3)?

The grid-row-end property defines how many rows an item will span, or on which row-line the item will end (see example at the end of this page). grid-row-end: auto | row-line | span n; 1) auto - Default value. The item will span one row. 2) row-line - Specifies the number of rows the item will span. 3) span n - Specifies on which row to end the display of the item. *useful if grid-auto-flow: column;* https://www.w3schools.com/cssref/pr_grid-row-end.asp

*grid-row-gap:* what does? Values?

The grid-row-gap property defines the size of the gap between the rows in a grid layout. grid-row-gap: length; - Any legal length value, like px or %. 0 is the default value https://www.w3schools.com/cssref/pr_grid-row-gap.asp

*grid-row-start:* what does? Values (3)?

The grid-row-start property defines on which row-line the item will start. grid-row-start: auto | row-line; 1) auto - Default value. The item will be placed by following the flow. 2) row-line - Specifies on which row to start the display of the item. 3) span row-line - *useful if grid-auto-flow: column;* https://www.w3schools.com/cssref/pr_grid-row-start.asp

*grid-template:* what is? Keyword? Order of values (2)?

The grid-template property is a shorthand property for the following properties: 1) grid-template: grid-template-rows / grid-template-columns; 2) grid-template: grid-template-areas; 3) see how to combine them all in the example above Keyword: grid-template: none - Default value. No specific sizing of the columns or rows https://www.w3schools.com/cssref/pr_grid-template.asp

*grid-template-areas:* what does? Note? Syntax? Values (2)?

The grid-template-areas property specifies areas within the grid layout. *Note:* You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property. *Syntax:* Each area is defined by apostrophes. Use a *period sign* to refer to a grid item with no name. EX: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-template-areas grid-template-areas: none | itemnames; 1) none - Default value. No named grid areas 2) itemnames - A sequence that specifies how each columns and row should display https://www.w3schools.com/cssref/pr_grid-template-areas.asp

*grid-template-columns:* what does? Keywords (6)? Note?

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. *Note:* The values are a space-separated list, where each value specifies the *height of the respective row.* grid-template-columns: none | auto | max-content | min-content | length; 1) none - Default value. Columns are created if needed 2) auto - The size of the columns is determined by the size of the container and on the size of the content of the items in the column 3) max-content - Sets the size of each column to depend on the largest item in the column 4) min-content - Sets the size of each column to depend on the largest item in the column 5) length - Sets the size of the columns, by using a legal length value. 6) repeat(times to repeat, values) - The repeat() CSS function represents a repeated fragment of the track list https://www.w3schools.com/cssref/pr_grid-template-columns.asp

*grid-template-rows:* what does? Keywords (5)? Note?

The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout. *Note:* The values are a space-separated list, where each value specifies the *height of the respective row.* grid-template-rows: none | auto | max-content | min-content | length; 1) none - No size is set. Rows are created if needed 2) auto - The size of the rows is determined by the size of the container, and on the size of the content of the items in the row 3) max-content - The size of the rows is determined by the size of the container, and on the size of the content of the items in the row 4) min-content - The size of the rows is determined by the size of the container, and on the size of the content of the items in the row 5) length - The size of the rows is determined by the size of the container, and on the size of the content of the items in the row 6) repeat() - https://www.w3schools.com/cssref/pr_grid-template-rows.asp

*justify-content:* what does? Keywords (7)? (*Grid*)

The justify-content property aligns the flexible container's items along the main-axis (horizontally). justify-content: 0) stretch - If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally) 1) start - *Default value. In flexbox used as flex-start.* For items that are not children of a flex container, this value is treated like start. 2) end 3) center 4) space-between 5) space-around 6) space-evenly https://www.w3schools.com/cssref/css3_pr_justify-content.asp https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

*justify-items:* what does? Keywords (4)? When can be useful? (*Grid*)

The justify-items property aligns the flexible container's items along the main-axis (horizontally). justify-items: 1) stretch - *Default value.* 2) start 3) end 4) center *Useful:* only for grid. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

*justify-self:* what does? Keywords (5)? When can be especially useful? (*Grid*)

The justify-self property aligns the flexible container's item along the main-axis (horizontally). justify-items: 0) auto - *Default value.* 1) stretch 2) start 3) end 4) center *Useful:* only for grid. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

*minmax()*

The minmax() function defines a size range greater than or equal to min and less than or equal to max. grid-template-rows: 1fr minmax(10em, 20em) 1fr; https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

Grid cell

The space between two adjacent column and two adjacent grid lines. A single unit of the grid.

Grid track

The space between two adjacent grid lines. They can be thought of as the columns or rows of the grid.

Grid area

The total space surrounded by four grid lines. May be comprised of any number of grid cells.

Shortcuts for line names?

We can ignore the postfixes and refer simply to the areas of main and sidebar

<line-name> how to use?

You can explicitly name certain types of lines. By specifying the name before the <track-size>