Back-to-Basics: CSS Grid Declarations: Shorthand

We've learned a lot from getting to know the long form declarations of CSS Grid, but did you know there was a shorthand way of declaring your grid? Welp, if you didn't this will Blow your mind(not really, but it's cool).

Defining a grid and placing its items:

• grid

grid, huh, so how do we do this?

Again, let's set up our HTML and define our Grid:

• HTML:

    <section class="ExampleOne">
        <div class="ExampleOne__a">A</div>
        <div class="ExampleOne__b">B</div>
        <div class="ExampleOne__c">C</div>
        <div class="ExampleOne__d">D</div>
    </section>

• .Grid:

Example 1

.ExampleOne{
    display: grid;
    grid: "A A" 2rem "B C" "D D" 1.5rem / auto 1fr;
    grid-gap: 0.15rem;
}
// I use grid-gap to give a defining space so that the content is easier to read.

The above declares a grid with four named areas: A, B, C, and D. The first ("A A") and last ("D D") row is given a fixed size otherwise rows default to auto (content-based) sizing. The first column is sized to fit its contents (auto), and the second column takes up the remaining space (1fr).

Place the items using grid-area

 .ExampleOne__a { 
        grid-area: A;
    }
.ExampleOne__b { 
        grid-area: B;
    }
.ExampleOne__c { 
        grid-area: C;
    }
.ExampleOne__d { 
        grid-area: D;
    }

Example 2

.ExampleTwo{
    display: grid;
    grid: repeat(auto-fill, 10em) / auto-flow 1fr;
}

The Grid declaration above will create as many rows of at least 10em as will fit in the height of the grid container. The grid has no explicit columns; instead, columns are added as content is added, the resulting column widths are equalized

Grid-items are placed in relation to the initial grid declaration, so there aren't any implicit grid-item placement declarations.

Example 3

.ExampleThree{
    display: grid;
    grid: auto 1fr auto / repeat(3, 1fr);
}

This final declaration I'm showing, builds a grid with 3 evenly-sized columns and three rows, with the middle row taking up all remaining space (and at least enough to fit its contents)

Grid-items are placed in relation to the initial grid declaration, so there aren't any implicit grid-item placement declarations.

Here's the pin!

Shorthand Ways to Declare Your CSS Grid by Ren Estep (@ren_estep) on CodePen.

Is your mind blown yet? Are you thinking CSS Grid is amazing but Can I use it ?

Well, it's partially supported for IE11, but for safety sake, I highly suggest a polyfill.
(If you have a preferred polyfill post it in the comments)