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

Higher Order Functions in JavaScript Explained Simply

  What is a higher order function? In JavaScript, a higher-order function is a function that  takes one or more functions as arguments,  or returns a function as output. These functions are a powerful feature of the language that allow you to write concise and expressive code. The best way to learn higher order functions (and likely the most “real-world”) is to look at “map()” and “filter()”. Both take functions as arguments where the function is applied to each element in an array. Map For example, consider the  map  function, which is used to apply a function to each element of an array and return a new array containing the results. The  map   function is a higher-order function because it takes a function as its argumen t, in this case the function to apply to each element of the array. const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(x => x * x); Filter Another common higher-order function is  filter , which is used to select el...
Post a Comment
Read more

Basic CRUD Array Operations in JavaScript

  Sometimes it pays just to stick to the basics. Here are CRUD operations for a basic array: 1. Create an element to the end of an array let clubs = ['baseball','running','computer club']; clubs.push('tennis'); console.log(clubs); 2. Delete an element from the end of an array let clubs = ['baseball','running','computer club']; const lastElement = seas.pop(); console.log(lastElement); 3. Reading an index from an element in an array let clubs = ['baseball','running','computer club']; let index = clubs.indexOf("running"); console.log(index); 4. Update an index from an element in an array let clubs = ['baseball','running','computer club']; clubs.splice(1, 0, 'tennis'); console.log(clubs);
Post a Comment
Read more

Spring Data JPA Many-To-Many Explained Simply

  At a certain point in your Java career, it is inevitable to arrive at a point where you have models that are related to each other but cannot be solved with foreign keys. A good example of a many-to-many relationships is the relationship between rice and sauces. I love ALL types of different rice with different types of sauces. Sometimes I like Jasmine rice with spicy curry, while other times I like sticky rice with soy sauce. In a pinch, I’ve even ate Jasmine rice with soy sauce! *crowd gasps* Overall, many-to-many is a relationship that has infinite amounts of different combinations. Try to apply the rice analogy to a  one-to-many relationship  and it will not work. Many-To-Many Relationships To maintain a many-to-many relationship between two tables in a database, the only way is to have a third table which has a reference to both sides of the table. This table is called a “join” table and each entry in this table will connect the source table and target table. Many-...
Post a Comment
Read more