CSS Grid - the Ultimate Summary

display: grid | inline-grid;

grid-template-columns
grid-template-rows: [optional: line name, in square brackets] <track-size> | <repeat>;
    track-size: length, %, fr, auto
    line name: an arbitrary name for this item. If no name assigned, a number is used

    examples:
    .myClass {
        grid-template-columns: [col1] 40px [col2] 3fr;
        grid-template-rows: 50% 25vh auto;
    }

    .anotherClass {
        grid-template-rows: repeat(2, 350px [name]) 10%;
    }
    translates to
    .anotherClass {
        grid-template-rows: 350px [name] 350px [name] 10%;
    }

grid-template-areas:
    List of names of areas. First, name areas via selector. Then specify layout via this property. Area name must be specified for each column/row. A . indicates no content in this row/column.

    Note: in this example, the lines are named automatically: header-start, header-end, article-start, article-end, etc.

    example:
    .class1 {
        grid-area: header;
    }
    .class2 {
        grid-area: article;
    }
    .class3 {
        grid-area: aside;
    }
    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-rows: auto;
        grid-template-areas:
        "header header header header"
        "aside . article article";
    }

grid-template:
    Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas in 1 declaration. Not covered in class.

grid-column-gap: <number>;
grid-row-gap: <number>;
    Distance between rows and/or columns. At one point, only pixels were accepted for this - browser bug?

grid-gap:
    Shorthand for grid-column-gap and grid-row-gap.
    1 number = same in all directions
    2 numbers = row column

justify-items: start | end | center | stretch;
    align grid items on row axis
    stretch is default

align-items: start | end | center | stretch;
    align grid items on column axis
    stretch is default

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    If size of grid container is bigger than total of grid items, you can align grid items within the container (like flexbox). This works on row axis.

align-content:  start | end | center | stretch | space-around | space-between | space-evenly;
    If size of grid container is bigger than total of grid items, you can align grid items within the container (like flexbox). This works on column axis.

grid-auto-columns
grid-auto-rows: <track-size>;
    If you create grid cells beyond those specified in grid-template-columns and grid-template-rows, this specifies how big these extra rows/columns should be.


grid: shorthand for all of the above properties. Not covered in class.

grid-column-start
grid-column-end
grid-row-start
grid-row-end: <number> \| <name> | span <number> | span <name> | auto;
    This is the longhand for declaring individual values for start and end points for rows and columns.

    example:
    .class1 {
        grid-column-start: 1;
        grid-column-end: span 4;
        grid-row-start: 3;
        grid-row-end: span footer-end;
    }

grid-column
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
    Combines start and end values, as used extensively in class.

    example:
    .class1 {
        grid-column: 1 / span 4;
        grid-row: 3 / span footer-end;
    }

grid-area:  <name> | <row-start> / <column-start> / <row-end> / <column-end>;
OR
<name>;
    If you're confused, no wonder. grid-area can be used in 2 different ways:
        a. Assign a name for the grid-template-areas property (see above example under grid container/grid-template-areas)

        b. Assign a name AND the dimensions for a grid-template-areas property. If you use this methodology, you would not necessarily need a grid-template-rows and grid-template-columns declaration, depending on other factors.

        example:
        .class1 {
            grid-area: 1 / name3 / namedline / 4;
        }

justify-self: start | end | center | stretch;
    Aligns content in a grid item on the row axis. Overrides justify-items.

align-self: start | end | center | stretch;
    Aligns content in a grid item on the column axis. Overrides align-items.