Back-to-Basics: CSS Grid Declarations: Shorthand
Tags: css, beginners, tutorial
Published: 2020-04-15 22:53:09

|Grid Defs|   |
|---|---|
|Rows & Columns Only|[Back-to-Basics: CSS Grid Definitions: Rows & Columns Only](https://dev.to/stories_of_ren/back-to-basics-css-grid-definitions-rows-columns-only-2757)|
|Grid Template Areas|[Back-to-Basics: CSS Grid Definitions:Grid Template Areas](https://dev.to/stories_of_ren/back-to-basics-css-grid-definitions-grid-template-area-17m8)|
|Grid Short Hand|[(☞ﾟヮﾟ)☞You Are Here](https://dev.to/stories_of_ren/back-to-basics-css-grid-declarations-shorthand-gfp)|


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](https://dev-to-uploads.s3.amazonaws.com/i/1qsf9zgjovyeao663s6c.png)



`grid`, huh, so how do we do this?

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

- __HTML:__
``` 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

``` CSS
.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`
```CSS
 .ExampleOne__a { 
        grid-area: A;
    }
.ExampleOne__b { 
        grid-area: B;
    }
.ExampleOne__c { 
        grid-area: C;
    }
.ExampleOne__d { 
        grid-area: D;
    }
```

![Example 1 preview](https://dev-to-uploads.s3.amazonaws.com/i/0jjnphs2frlq961a1r6t.png)

#### Example 2

``` CSS
.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](https://dev-to-uploads.s3.amazonaws.com/i/pqhnigf5i83a3uplicwv.png)


#### Example 3

``` CSS
.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](https://dev-to-uploads.s3.amazonaws.com/i/p5acuotod5kfexlu7mq3.png)

Here's the pin!

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="ren_estep" data-slug-hash="BaoybbP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Shorthand Ways to Declare Your CSS Grid">
  <span><a href="https://codepen.io/ren_estep/pen/BaoybbP">
  Shorthand Ways to Declare Your CSS Grid</a> by Ren Estep (<a href="https://codepen.io/ren_estep">@ren_estep</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Is your mind blown yet? Are you thinking CSS Grid is amazing but [Can I use it ?](https://caniuse.com/#search=css%20grid)
![Can I use CSS Grid](https://dev-to-uploads.s3.amazonaws.com/i/o9gjy4y21ueohzmhuw4o.png)
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_**)