loading...
Cover image for Back-to-Basics: CSS Grid Declarations: Shorthand

Back-to-Basics: CSS Grid Declarations: Shorthand

stories_of_ren profile image ⚡️Ren⚡️ ・3 min read

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

Shorthand 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 1 preview

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 2 preview

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.

Example 3 preview

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 ?
Can I use CSS Grid
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)

Posted on by:

stories_of_ren profile

⚡️Ren⚡️

@stories_of_ren

Self taught Software Engineer. I have a preference for frontend.

Discussion

pic
Editor guide