Back-to-Basics: CSS Grid Declarations: Shorthand

Grid Defs
Rows & Columns Only	Back-to-Basics: CSS Grid Definitions: Rows & Columns Only
Grid Template Areas	Back-to-Basics: CSS Grid Definitions:Grid Template Areas
Grid Short Hand	(☞ﾟヮﾟ)☞You Are Here

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).

grid:	"A A" 2rem	"B C"	"D D" 1.5rem	/ auto 1fr
Shorthand Attribute	Grid Area A in Col 1 & 2	Grid Area B on Col 1	Grid Area D in Row 1	Column Definitions
	Row Height 2rem	Grid Area C on Col 2	Grid Area D in Col 1 & 2	Col 1 fills with what's inside
		Row Height Auto	Row Height 1.5rem	Col 2 takes up the rest of the space

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:	repeat(auto-fill, 10em)	/ auto-flow 1fr
Shorthand Attribute	Row Definition	Column definition
	creates as many rows that can fit within the height definition of the grid container	columns dynamically fill space available as they are "created"

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:	auto 1fr auto	/ repeat(3, 1fr)
Shorthand Attribute	Row Definition	Column definition
	the first & last row height is automatic, filling with row content	Columns are created with equal widths
	the middle row takes the remaining space (1fr)

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)