Skip to main content

CSS Grid Shorthand Property Explained Simply

 If there is one thing I’ve learned about CSS, it’s that CSS loves shortcuts (aka “shorthand” properties)! The grid property is CSS Grid combines the following properties.

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Like most shorthand properties in CSS, depending on how many variables you add to the property will determine how it behaves.

Implicit vs Explicit grid

A key point in understand the grid shorthand property is understand the difference between implicit and explicit grids.

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a a fixed number of tracks that form the explicit grid.

Why are they explicit? Because you meant to set them to a specific value.

The implicit grid property is automatically generated by CSS grid. Implicit grid properties will also auto generate grid tracks and grid lines. Implicit properties include grid-auto-flow, grid-auto-rows, and grid-auto-columns.

The grid shorthand property combines all the implicit grid properties and explicit grid properties.

/* By using 2 values, you can control rows and columns */
grid: grid-template-rows / grid-template-columns;

/* By using one column, you can control the area */
grid: <grid-template-areas>;

/* You can also use auto value in conjunction to make columns */
grid: <grid-template-rows> / <grid-auto-columns>;

/* Same with rows */
grid: <grid-auto-rows> / <grid-template-columns>;

/* You can use auto with a column value as well */
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;

/* grid-auto-flow can also be used */
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

Getting started with CSS Grid Shorthand

To get started with CSS grid shorthand, first set display: grid and use the grid property to layout the rows and columns.

container {
    display: grid;
    grid: 50px auto 300px / repeat(2, 1fr) 100px;
}

The example above may look confusing but it helps to go thru one at a time:

  • 50px auto 300px. This means we want three explicit rows of rows of 100px, auto, and 300px.
  • repeat(2, 1fr) 100px. Using the repeat() function, we set two columns of 1fr and one for 100px.

To remember how grid shorthand works, imagine left side of slash controls rows and right side controls columns.

.container {
    display: grid;
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;
}

The above is a longer none shorthand version but is equivalent to grid shorthand property.

Adding Implicit Values

The ability to add implicit values puts grid shorthand on steroids.

.container {
  display: grid;
  grid: auto-flow 100px / 1fr 100px;
}

In the example above, our columns (right side) are all set with explicitly.

The left side of our grid property is all implicit properties.

Basically, the left side uses an abbreviated form of grid-auto-flow and grid-auto-rows.

The auto-flow simply means add more rows and tracks to the grid automatically. Also, make them 100px.

.container {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-auto-flow: row;
  grid-auto-rows: 100px;
}

Once again, grid shorthand is a simple, short way of writing this CSS property.


Credit: Teddy

Comments

Post a Comment

Popular posts from this blog

Hoisting In JavaScript Explained Simply

  JavaScript is a weird language. We are all aware of this. But one of the biggest peculiarities is the concept of hoisting. Because hoisting is centered around variable declaration, it confuses beginners to no end. In this blog, I am going to give practical, real-world explanations of hoisting! Hoisting Introduction Hoisting is a default behavior which variables and function are moved to the top of the scope before JS executes.   Even more simply put, it allows you to use variables and functions before declaring them. x = 1; console.log(x); //This is valid and will execute. var x; Essentially, JavaScript is taking “var x;” variable  declaration  and placing it above x = 1. The biggest caveat to hoisting is that it only works with declaration BUT not initialization of variables. console.log(x) //This will be undefined because it is being initialized. var x = 1; Hoisting Functions in Javascript JavaScript engine moves function declarations to the top similar to varia...
Post a Comment
Read more

Immutability in JavaScript

  Immutability is a popular concept not just in JavaScript, but most programming languages in general. The reason behind this of course is functional programming which gives software developers a brand new paradigm to utilize when coding. Let’s dive into the details of mutability and immutability. What is Mutability? A mutable value is one that can be changed without creating an entirely new value.   In JavaScript, objects and arrays are mutable by default, but primitive values are not.  Once a primitive value is created, it cannot be changed, although the variable that holds it may be reassigned. There is nothing wrong with mutability. Take a look at the code below: const dog = { name: 'turtle', age: 10 } // Make a copy of dog object const newDog = dog; // Changing the age of the new dog newDog.age = 12; console.log(newDog === dog); // true As you can see, we’re copying the object to another object and changing the dogs age. The problem is that the change happe...
Post a Comment
Read more