Learn CSS Grids with illustrations

Mastering CSS Grid with illustrations

Table of contents:

1. What is the grid 
2. Grid terminology
3. Grid container properties
4. Grid items properties
5. Responsive grids
6. Shorthand properties

What is the grid in CSS?

If we compare CSS Grid to any previous web layout system, it is a two-dimensional grid-based layout system that completely changes how we create user
interfaces. We've been using CSS to design the layout of our web pages, but it hasn't always worked out well.
In the early days, we used tables and later floats, positioning, and inline blocks, which were necessary workarounds for layouts lacking in some key aspects.

The CSS Grid is the first CSS module built expressly to address the layout issues we’ve all been
playing with. Flexbox is also a popular one-dimensional layout tool. These two tools work well together.

Designing web pages without floats or positioning is made easy with grids. It can have items placed on it vertically, horizontally, or both at once. You can arrange
items however you want, even stacked.

Grid terminology

Before learning the properties of Grid, it is important to comprehend the terminologies
used in Grid. If you have a solid grasp of these concepts, mastering Grid will go a lot easier for you.

Let's jump right in.

Grid container

The grid container is the parent element in a grid layout with one or more child elements.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

In the above example, the div with class grid-container is the parent element, and the divs with class grid-item are the child elements.

Grid item

A grid item is an element that is an immediate descendant of the grid container.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

The Grid items (contents) are distributed along the main axis and cross axes. You can build a website layout by modifying the components and using
different grid properties.

Grid Architecture

Illustration ↝

Grid lines

Grid elements are composed of grid lines, which are horizontal and vertical. If your grid has three rows and three columns,
it will have four column lines and four row lines, including the one final line.

Illustration ↝

Grid cell

A single unit within a grid layout is referred to as a grid cell. It is the intersection of a row and a column in the grid. Each cell can contain content
or other elements.

In the illustration below, each square(item) in the grid represents a cell.

Illustration ↝

Gaps

In a grid layout, the gap is used to indicate the size of the gutter or space between columns and rows. It determines the gap between adjacent grid tracks.

Gap properties:

• column-gap - sets the gap between columns.
• row-gap - sets the gap between rows.
• gap - It's a shorthand. You can use it to set the column-gap and row-gap in a single line.

Example:

.grid-container {
  display: grid;
  gap: 20px;
}

Illustration ↝

Grid tracks

The space between two grid lines is referred to as a track. A row track is a space between two row lines, and a column track is a space between two column lines. These tracks are created when we give a size to our grid.
See the illustration below to better understand:

Illustration↝

Grid Area

The grid area consists of several grid cells. It allows items to span a specified number of rows and columns within a grid layout.

12 row X 12 column layout

Illustration ↝

Grid Properties

In terms of grid properties, there are two types. As following:

1. Parent Properties(Grid Container)
2. Children Properties(Grid Items)

Grid container properties

display

When the display property of an HTML element is set to grid or inline-grid, the element becomes a container for a grid.
The grid creates a block-level container that enables flexible and grid-like layouts by placing items in both columns and rows.

Example:

.grid-container {
  display: grid;
}

Output ↝

The inline-grid container, on the other hand, creates an inline-level container that enables items to be positioned horizontally,
making it suitable for inline layouts.

Example:

.grid-container {
  display: inline-grid;
}

Output ↝

Have you noticed the text before and after?

Those are two span elements that I added before and after the containers. So you can better understand the concept of block-level
and inline-level grid containers.

Rows and Columns

Rows and columns are made up of grid lines. Properties you can use to define rows and columns in a grid:

grid-template-columns - determines both the width and the number of columns in a grid. You can use several length units,
including px, em, %, min-content, max-content, fr, and auto, to measure that.

Use auto if you want columns to have the same width or an element to take all the available space. The fr is basically a fraction; it is a grid-only unit.
The keywords min-content and max-content denote the minimum and maximum sizes, respectively, that the content can occupy.

You have two options for setting column widths: either individually for each column or collectively for all columns using the repeat() function.

Illustration ↝

There will be precision in the pixel measurements. Any space available will be filled with the keyword auto.

Graphic↝

There will be no difference in size between the boxes as they are measured in fractions (1fr).

grid-template-rows - determines the height and the number of rows in a grid. The height and number of rows can also be specified using different length units.

You have two options for setting rows height: either individually for each row or collectively for all rows using the repeat() function.

Illustration ↝

The height of each row is specified separately 👆.

Illustration ↝

The height of each row using repeat() function 👆.

Here's an example code to create a grid with 3 columns and 3 rows using different sizing units.

.grid-container {
  display: grid;
  grid-template-columns: 7em 200px 20%;
  grid-template-rows: 100px 80px auto;
}

Justify items

Using the justify-items property, you can position the grid items inside the grid container along the main axis (x-axis). It may include one of the
following four values:

justify-items: start | end | center | stretch;

justify-items: start;

justify-items: end;

justify-items: center;

justify-items: stretch;

Align Items

Using the align-items property, you can position the grid items inside the grid container along the cross-axis (y-axis). It may include one of the
following four values:

align-items: start | end | center | stretch;

align-items: start;

align-items: end;

align-items: center;

align-items: stretch;

Justify content

Using the justify-content property, you can position the grid(all items) inside the grid container along the main-axis (x-axis).
It may include one of the following seven values:

justify-content: start | end | center | stretch | space-between | space-around | space-evenly;

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: stretch;

justify-content: space-around;

Note: There is an equal amount of space between each grid item, with half-size spaces at the ends.

justify-content: space-between;

Grid items are separated with equal space between them.

justify-content: space-evenly;

Grid items are separated with even space between grid items also at ends.

Align Content

Using the align-content property, you can position the grid(all items) inside the grid container along the cross-axis (y-axis). It may include one
of the following seven values:

align-content: start | end | center | stretch | space-between | space-around | space-evenly;

align-content: start;

align-content: end;

align-content: center;

align-content: stretch;

align-content: space-around;

align-content: space-between;

align-content: space-evenly;

CSS Grid items properties

The grid items are contained in a grid container. First, let's take a look at the grid rows and column start and end points. To better understand the concept,
look at the illustration below.

Illustration ↝

column-start & column-end

The grid-column & grid-row properties

The grid-column property determines which column(s) an item should appear on. The grid-row property determines which row(s) an item should be placed on.
The grid-column is shorthand for grid-column-start and grid-column-end properties. 

Example:

grid-column-start : 2;
grid-column-end : 4;

/* shorthand */
grid-column : 2 / 4;

The grid-row is shorthand for grid-row-start and grid-row-end properties.

Example:

grid-row-start : 2;
grid-row-end : 4;

/* shorthand */
grid-row : 2 / 4;

The grid-column example:

Here's an example of a grid container with six items(divs):

HTML

<div class="grid-container">
  <div class="grid-item1">Item 1</div>
  <div class="grid-item2">Item 2</div>
  <div class="grid-item3">Item 3</div>
  <div class="grid-item4">Item 4</div>
  <div class="grid-item5">Item 5</div>
  <div class="grid-item6">Item 6</div>
</div>

CSS:

Syntax: grid-column: start-line / end-line;

.grid-item1 {
  grid-column: 1 / 3;
}

.grid-item2 {
  grid-column: 3 / 5;
}

.grid-item3 {
  grid-column: 1 / 4;
}
.grid-item4 {
  grid-column: 4;
}
.grid-item5 {
  grid-column: 1;
}
.grid-item6 {
  grid-column: 2 / 5;
}

This example uses the grid-column property to style 6 items in a grid layout.

The .grid-item1 takes up two columns, extending from the first to the third. The .grid-item2 takes up two columns and extends from the third to the fifth.

The .grid-item3 occupies three columns, extending from the first to the fourth. Only the fourth column is occupied by the .grid-item4.

The .grid-item5 takes up one column from the first column to the second column, while the .grid-item6 takes up three columns, spanning from the second
column to the fifth column.

With the help of these grid-column values specify each item's position and width within the grid structure, so you can arrange elements precisely and flexibly.

Illustration↝

The grid-row example

Here's an example of a grid container with six items(divs):

HTML

<div class="grid-container">
  <div class="grid-item1">Item 1</div>
  <div class="grid-item2">Item 2</div>
  <div class="grid-item3">Item 3</div>
  <div class="grid-item4">Item 4</div>
  <div class="grid-item5">Item 5</div>
  <div class="grid-item6">Item 6</div>
</div>

CSS:

Syntax : grid-row: start-line / end-line;

.grid-item1 {
  grid-row: 1 / 3;
}

.grid-item2 {
  grid-row: 3 / 5;
}

.grid-item3 {
  grid-row: 1 / 4;
}
.grid-item4 {
  grid-row: 4;
}
.grid-item5 {
  grid-row: 1 / 2;
}
.grid-item6 {
  grid-row: 2 / 5;
}

This example uses the grid-row property to style 6 items in a grid layout.

The .grid-item1 takes up two rows, extending from the first to the third. The .grid-item2 also takes up two rows and extends from the third to the fifth.

The .grid-item3 occupies three rows, extending from the first to the fourth. The .grid-item4 takes one row.

The .grid-item5 takes up one row from the first row, while the .grid-item6 takes up three rows, spanning from the second row to the fifth row.

With the help of these grid-row values, you can specify each item's position and height within the grid layout, so you can arrange elements precisely
and flexibly.

Illustration ↝

You can also do this using the span keyword, which is the same thing but easier to read and understand. 

So, what span does, specify the number of columns/rows each item should span/expand.

Here is an example of how you can use span in items.grid-item1 and .grid-item2 mentioned above:

.grid-item1 {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

.grid-item2 {
  grid-row: 3 / span 2;
  grid-column: 3 / span 2;
}

Grid area

The grid-row and grid-column are excellent properties, but grid-area is even greater. The grid-area property is the shorthand for four values it
requires:

• grid-row-start
• grid-column-start 
• grid-row-end
• grid-column-end 

If you want .item1 to span over 2 rows and 2 columns. You can give it the grid-area with the starting line of row 1(1), the starting line of column 1(1),
the ending line of row 2(3), and the ending line of column 2(3). You can also use negative values.

Syntax: grid-area: row-start / column-start / row-end / column-end;
CSS

.grid-item:nth-child(1) {
  grid-area: 1 / 1 / 3 / 3;
}

Here's the illustration:

To define these values, you may also use the span keyword. Here is an example of how to use span to create the same layout:

.grid-item:nth-child(1) {
  grid-area: 1 / 1 / span 2 / span 2;
  }

The grid-area property can also be used to give names to grid items. It is more useful when you dealing with more complex layouts. Though to work with this
first you must set up grid-template-areas. Once finished, you must include the names from the parent class inside the children(items) classes.

To begin with, define the grid-template-areas inside of your grid(parent) container like this:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh;
}

Now, use the grid-area to specify the names used in the grid container inside the item classes as follows:

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

Output ↝

Responsive Grids

Media Queries

Having a responsive website is way more important than it was before. 

"Mobile devices, excluding tablets, contributed 58.33% of all website traffic worldwide in the first quarter of 2023." - Tiago Bianchi

You cannot simply take the risk of missing an audience this large that browses on their smartphones.

You can use media queries to make the example above responsive. Before that, take a look at how it looks in responsive mode before
applying any media queries:

Illustration ↝

Before Applying Media Queries👆

Notice that it has the exact same layout as the desktop version. However, it does not look good. In order to make it look better on
mobile mode, we need these items to stack on top of one another. To do this, we may use media queries.

Here's how to use media queries to accomplish that:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer";
  gap: 10px;
  height: 100vh;
}

.
.
.

@media (min-width: 50em) {
  .grid-container {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

You may notice, we only updated only one .grid-container class in the responsive design code and added media queries for the desktop
version. When grid-template-columns: 1fr is set, the header, sidebar, main content area, and footer will stack vertically on mobile
devices. 

Result ↝

After Applying Media Queries 👆

Minmax() Function

The minmax()function helps you set the minimum and maximum grid
track sizes. Using this method, you can give grid objects a minimum width and let them expand to a maximum width if there is
extra space.

For example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

The auto-fit keyword allows the columns to adjust and fill available space while respecting their minimum and maximum sizes. On the other
hand, the auto-fill keyword ensures that the grid is always filled by adding empty tracks to fill in additional
space. Both auto-fill and auto-fit are used in conjunction with the repeat() function in CSS Grid.

In addition, there is another sizing function called fit-content(). The fit-content() function in CSS Grid makes that grid tracks or items never go smaller than the minimum (min-content) size or bigger than the maximum(max-content) size based on the content. You can make your designs more responsive and flexible by using fit-content() to create dynamic, flexible grid layouts.

.grid-container {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

Change elements order

CSS Grid Layout allows you to position elements anywhere within the grid, regardless of their order in the HTML code. This functionality
is especially helpful when designing alternate layouts for various screen sizes. By combining media queries and CSS Grid Layout, which
provides a powerful toolkit for precise designs, you can easily achieve precise designs that meet your needs.

For example:

.grid-item1 { grid-area: 1 / 2 / 1 / 3; }
.grid-item2 { grid-area: 1 / 4 / 1 / 3; }
.grid-item3 { grid-area: 1 / 1 / 2 / 2; }

Output ↝

The justify-self property

Using the justify-self property, you can position an item inside the grid container along the main axis(x-axis). It may include
one of the following four values:

justify-self: start | end | center | stretch;

Illustration ↝

The align-self property 

Using the align-self property, you can position an item inside the grid container along the cross-axis(y-axis). It may include one
of the following four values:

align-self: start | end | center | stretch;

Illustration ↝

Shorthand Properties

Shorthand properties in CSS allow you to declare and set a number of related properties in one line. It will
reduce the code you write and make your stylesheet smaller. Shorthand properties are usually used for properties with multiple values.

1. gap / grid-gap: Determine the space between tracks and grid items. The gap is a shorthand property for setting both row and column gaps, while grid-gap specifically sets the gap between grid items.

2. grid-template: Define the structure of the grid by specifying rows, columns, and areas. It is shorthand for grid-template-rows,
   grid-template-columns, and grid-template-areas properties.

3. place-content: It is shorthand for align-content and justify-content properties.

4. place-items: Set the alignment and positioning of individual grid items within the grid. It is shorthand for align-items and justify-items properties.

5. place-self: Control the alignment and positioning of a single grid item within its grid cell. It is shorthand for align-self and justify-self properties.

6. repeat(): Specify a pattern of repeating grid track sizes within the grid-template-columns or grid-template-rows properties.

Resources

Interested in learning more? These are some of the best CSS Grid resources:

• A Complete Guide to CSS Grid - CSS Tricks
• CSS Grid- WEB.DEV
• CSS Grid Layout - MDN
• CSS Grid Cheatsheet
• Grid by Example by Rachel Andrew
• Free course - LEARN CSS GRID WITH WES BOS
• Learn CSS Grid by playing game - Grid Garden
• CSS Grid Generator
• - Ebook - Master Flexbox and Grid

I'm open to writing opportunities. If you'd like me to write for you, you may email me at ishratumar18@gmail.com, or send me a direct message on Twitter.

=> Read it on Medium

Conclusion

That's pretty much it. I really hope it gives you a better understanding of CSS Grids.