Posted onJul 15, 2023 • Edited onAug 14, 2023 • Originally published atgithub.com

Learn CSS Grids with illustrations

#css #beginners #webdev #frontend

Mastering CSS Grid with illustrations

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>  <div>Item 1</div>  <div>Item 2</div>  <div>Item 3</div></div>

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

Grid item

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

<div>  <div>Item 1</div>  <div>Item 2</div>  <div>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 thecolumn-gap androw-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:

Parent Properties(Grid Container)
Children Properties(Grid Items)

Grid container properties

display

When thedisplay property of an HTML element is set togrid orinline-grid, the element becomes a container for a grid.
Thegrid creates ablock-level container that enables flexible and grid-like layouts by placing items in both columns and rows.

Example:

.grid-container {  display: grid;}

Output ↝

Theinline-grid container, on the other hand, creates aninline-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 textbefore andafter?

Those are two span elements that I added before and after the containers. So you can better understand the concept ofblock-level
andinline-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.

Useauto if you want columns to have the same width or an element to take all the available space. Thefr is basically a fraction; it is agrid-only unit.
The keywordsmin-content andmax-content denote theminimum andmaximum 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 therepeat() 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 therepeat() function.

Illustration ↝

The height of each row is specified separately 👆.

Illustration ↝

The height of each row usingrepeat() 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 thejustify-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 thealign-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 thejustify-content property, you can position the grid(all items) inside the grid container along themain-axis (x-axis).
It may include one of the following seven values:

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 thealign-content property, you can position the grid(all items) inside the grid container along thecross-axis (y-axis). It may include one
of the following seven values:

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

Thegrid-column property determines which column(s) an item should appear on. Thegrid-row property determines which row(s) an item should be placed on.
Thegrid-column is shorthand forgrid-column-start andgrid-column-end properties.

Example:

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

Thegrid-row is shorthand forgrid-row-start andgrid-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>  <div>Item 1</div>  <div>Item 2</div>  <div>Item 3</div>  <div>Item 4</div>  <div>Item 5</div>  <div>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 thegrid-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 thesegrid-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>  <div>Item 1</div>  <div>Item 2</div>  <div>Item 3</div>  <div>Item 4</div>  <div>Item 5</div>  <div>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 thegrid-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 thesegrid-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 thespan keyword, which is the same thing but easier to read and understand.

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

Here is an example of how you can use span initems.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

Thegrid-row andgrid-column are excellent properties, butgrid-area is even greater. Thegrid-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 thegrid-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 thespan keyword. Here is an example of how to usespan to create the same layout:

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

Thegrid-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 upgrid-template-areas. Once finished, you must include the names from the parent class inside the children(items) classes.

To begin with, define thegrid-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. Whengrid-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

Theminmax()function helps you set theminimum andmaximum grid
track sizes. Using this method, you can give grid objects aminimum width and let them expand to amaximum width if there is
extra space.

For example:

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

Theauto-fit keyword allows the columns to adjust and fill available space while respecting theirminimum andmaximum sizes. On the other
hand, theauto-fill keyword ensures that the grid is always filled by adding empty tracks to fill in additional
space. Bothauto-fill andauto-fit are used in conjunction with therepeat() function in CSS Grid.

In addition, there is another sizing function calledfit-content(). Thefit-content() function in CSS Grid makes that grid tracks or items never go smaller than theminimum (min-content) size or bigger than themaximum(max-content) size based on the content. You can make your designs more responsive and flexible by usingfit-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 thejustify-self property, you can position an item inside the grid container along themain axis(x-axis). It may include
one of the following four values:

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

Illustration ↝

The align-self property

Using thealign-self property, you can position an item inside the grid container along thecross-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.

gap / grid-gap: Determine the space between tracks and grid items. The gap is a shorthand property for setting both row and column gaps, whilegrid-gap specifically sets the gap between grid items.
grid-template: Define the structure of the grid by specifying rows, columns, and areas. It is shorthand forgrid-template-rows,
grid-template-columns, andgrid-template-areas properties.
place-content: It is shorthand foralign-content andjustify-content properties.
place-items: Set the alignment and positioning of individual grid items within the grid. It is shorthand foralign-items andjustify-items properties.
place-self: Control the alignment and positioning of a single grid item within its grid cell. It is shorthand foralign-self andjustify-self properties.
repeat(): Specify a pattern of repeating grid track sizes within thegrid-template-columns orgrid-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 atishratumar18@gmail.com, or send me a direct message onTwitter.

=>Read it on Medium