CSS Grid Layout: Basics, Terminologies and Properties

The purpose of grid layout CSS is to simplify the process of designing a web page layout. Although tables, floats, and Flexbox can be used for this purpose, they were not originally intended. Flexbox is specifically designed for distributing elements in one direction, making it unsuitable for complex layouts.

In this article, we've broken down grid system CSS into a few easy-to-understand concepts guaranteed to revolutionize how you design web layouts forever.

Let’s dive right in!!

Introduction to CSS Grid

CSS Grid is an incredibly powerful solution to tackle any layout challenges web developers face. With its unparalleled flexibility, you can easily create any layout you desire by using rows and columns. Despite its many layout concepts and properties, implementing CSS Grid is straightforward.

CSS Grid Basics: To create a grid layout in CSS, utilize the CSS Grid Layout module. Begin by defining a container element with "display: grid". Then, position child elements onto the grid using "grid-column" and "grid-row". Specify column and row sizes using "grid-template-columns" and "grid-template-rows". Unlike traditional layouts, the order of grid items is flexible, allowing easy rearrangement with media queries. With just a few lines of CSS, define your entire page layout and adapt it to different screen sizes.

Grid Terminology

To optimize your understanding of CSS Grid, getting familiar with a few key grid terms will be mentioned throughout this article.

1. Grid Container

An HTML element becomes a grid container when its display property is set to the grid or inline grid. It’s the direct parent of all the grid items.

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

CSS:
.container {
    display: grid;
}

Here, the element with the container class is a grid container.

2. Grid Item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but the sub-item isn’t.

<div class="container">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item">
      <p class="sub-item"></p>
   </div>
   <div class="item"></div>
</div>

In this example, grid items are those elements that have the class item in them. However, the element with the class sub-item is not a grid item because it is not the direct descendent of the grid container.

3. Grid Line

The grid comprises horizontal and vertical lines known as grid lines. Each line has a reference number that increases by 1 from the grid container's outer edge towards the grid's direction.

The lines between columns are called column lines, while those between rows are row lines. When placing an item in the grid, referring to the line numbers is necessary.

In the image, the highlighted blue line represents column line 3.

4. Grid Track

A grid track is a horizontal or vertical space between two grid lines. It is a term for columns or rows of the grid.

Here’s an example of the grid track between the third and fourth-row grid lines:

5. Grid Cell

A grid cell is a space between four grid lines – two adjacent rows and two adjacent column grid lines. It’s the smallest possible unit on the grid where you can place an item.

Here is an example of the grid cell between row grid lines 2 and 3 and column grid lines 1 and 2.

6. Grid Area

The grid area is the area on the grid surrounded by four grid lines. There could be several grid cells in it.

Here’s an example of a grid area between row grid lines 2 and 4, and column grid lines 2 and 5.

CSS Grid Properties

1. Properties of the Grid Container

Display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

values:

• display: grid
• Display: inline-grid

The grid property makes the grid items block level, taking the entire width of the grid container.

The inline-grid makes grid items inline, while the grid makes the grid-items block level.

grid-template-rows & grid-template-columns

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line

Values:

• Track-size: can be a length, a percentage, or a fraction of the free space in the grid using the fr unit
• line-name: an arbitrary name of your choosing

Grid lines are automatically assigned positive numbers from these assignments(-1 being an alternate for the very last row)

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

grid-template-areas

The grid-template-areas property defines the grid template by referencing the names of the grid areas specified with the grid-area property.

First, you name the items of the grid by the grid-area property, and then you reference those names in the grid-template-areas property.

In the grid-template-areas property, you repeat the grid area names, which causes that cell to span according to the repeated times.

Values:

• grid-area-name: the name of a grid area specified with the grid-area property.
• none – no grid areas are defined.

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

You can find more information in official documentation regarding grid-template-areas. Apart from this, you can also find more information regarding grid-templates, everything about grid-gaps, justify-items, align-items, place-items, justify-content, align-content and also about grid-flow and all shorthand grid properties

2. Properties of the Grid Items

Similar to grid containers, CSS also provides several properties to work with grid items, which allows you to have more control over them.

Below we discuss these properties:

grid-column-*, grid-row-*

These properties determine the location of grid items by specifying where to start and where to end the item in grid lines. grid-row-start and grid-column-start specify the line where the item begins. Similarly, grid-row-end and grid-column-end specify the line where the item ends.

Values:

• line: take a number to refer to a grid line or a name to refer to a named grid line
• span: takes a number or a name. The item will span across the specified number of grid tracks when it takes a number. Whereas, in the case of name, the item will span across until it hits the line with the specified name.
• auto: indicates auto-placement, an automatic span, or a default span of one

.item {
   grid-column-start: <number> | <name> | span <number> | span   <name> | auto;
   grid-column-end: <number> | <name> | span <number> | span   <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span  <name> | auto;
   grid-row-end: <number> | <name> | span <number> | span   <name> | auto;
 }

If grid-column-end or grid-row-end is not declared, the item will span 1 track by default.

grid-column, grid-row

Shorthand property for grid-column-start and grid-column-end, grid-row-start and grid-row-end respectively

Values:

• start line/end line: each one accepts all the same values as the longhand version, including the span

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

grid-area

The grid-area property assigns a name to a grid item which then can be referenced by the grid-template-areas property of the grid container.

This property can also be used as a shorthand property for

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

Values:

• name: a name of your choice.
• row-start / column-start / row-end / column-end: same values as the longhand property of each.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Justify-self

Each grid item has a cell of its own. By default, grid items get placed in their cell filling the entire width of the cell. The justify-self property aligns a grid item inside a cell along the row axis. A grid item located inside a single cell is affected by this value.

Values:

• start: aligns the grid item at the start of the cell.
• end: aligns the grid items at the end of the cell.
• centre: aligns the grid item in the centre of the cell.
• stretch: stretch the grid item across the entire cell filling the entire width of the cell. This is the default value.

.item {
  justify-self: start | end | center | stretch;
}

align-self

The align-self property aligns a grid item inside a cell along the column axis. This value applies to the content inside a single grid item.

Values:

• start: aligns the grid item at the start of the cell.
• end: aligns the grid items at the end of the cell.
• center: aligns the grid item in the center of the cell.

stretch: stretch the grid item across the entire cell filling the entire height of the cell. This is the default value.

.item {
  align-self: start | end | center | stretch;
}

3. Fluid Column Properties

Fluid width columns that break into more or less columns as space is available, with no media queries!

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  gap: 1rem;
}

It includes more properties and functions like repeat(), minmax(), auto-fill, and auto-fit etc., You can find more in the documentation.

Check out our latest blog “Advantages and Disadvantages of CSS”!

Conclusion

In conclusion, CSS Grid is the most important CSS module for creating modern web layouts. It is a comprehensive subject. This is not a complete CSS grid article on how to build actual CSS layouts. Hopefully, the information here was insightful and inspired interest in building websites using CSS grids. CSS Grid isn’t just an HTML element. It’s an entire system for building responsive websites and web applications. If you're interested in diving deeper into web development, consider exploring our full stack developer course. Pat yourself on the back for making it to the end!

It’s time for you to go and create some amazing web pages!