CSS Grid: The Complete Guide

Introduction to CSS Grid

Grid is a powerful layout tool for creating responsive website layouts. It is more structured, using a grid-based layout system of rows and columns, which makes it better than using other traditional layouts, such as floats.

In this guide, we will explore more on the grid, so buckle up and let’s get started.

Highlight

• By the end, you’ll be able to fully understand comprehensively about Grid.
• You will get hands-on experience with examples to deepen your understanding.
• You will have the opportunity to do a practical guide in building a responsive web page using grid.

What is CSS Grid?

CSS Grid is a powerful layout system in CSS that lets you arrange elements in a two-dimensional grid—both rows and columns. It makes creating complex, responsive web layouts simple and intuitive.

Key points you should keep in mind:

• Two-Dimensional Layout: CSS Grid allows you to layout items in both rows and columns simultaneously.
• Flexible and Responsive: Easily resize and reposition elements to create responsive designs.
• Simplifies Complex Layouts: Reduces the need for floats, positioning, and other hacks, resulting in cleaner and more maintainable code.

Use CSS Grid for complex layouts and opt for Flexbox when you need one-dimensional control (either rows or columns).

Benefits of using Grid

Grid offers an efficient way to create complex and responsive web layouts. Before CSS Grid, achieving such layouts required a mix of floats, positioning, and other hacks developers could come up with, which were often complex and difficult to maintain.

Below are some of the reasons why CSS Grid came into play the most:

• Simplifies layout design: A CSS Grid allows you to create complex layouts easily, without the need for floats or positioning tricks.
• Responsive Design: Makes it easy to create responsive designs by allowing you to define grid structures that adapt to different screen sizes.
• Precision Placement: Using simple and flexible assets, you can place objects exactly where you want them in the grid.
• Flexible sizing: CSS Grid supports flexible sizing, including fr units, making it easy to allocate space accordingly based on available space.
• Alignment and Spacing: Provides energy with the ability to align and space both vertically and horizontally, ensuring a consistent and balanced layout.
• Named grid fields: You can define and name grid fields, making your code more readable and easier to maintain.
• Reduces code complexity: CSS Grid allows you to have a complex layout with less code and fewer hacks, resulting in cleaner and more maintainable CSS.
• Supports layering: CSS grids allow for overlapping elements, enabling creative layouts that were difficult to accomplish with older layout methods.

For more complex web apps, it is best to use a grid.

Key concepts of Grid layout

Grid container

This is the foundation of the grid, defining the grid area and holding the grid items. You can set it with this code here: display: grid;

Grid lines

These are invisible horizontal and vertical lines that divide the grid container into rows and columns. They are useful in helping you know where to position your items within the grid container.

Grid items

The content you want to arrange within the grid layout. These can be any HTML elements, like divs, paragraphs, images, etc.

A grid layout can contain a parent element with one or more child elements.

Grid track

A grid track is a space between two adjacent grid lines. It can be either a row track or a column track. Essentially, it is the space defined between two horizontal lines (rows) or two vertical lines (columns).

Grid cell

A grid cell is the smallest unit in a CSS grid layout. It is the space between four grid lines (two horizontal and two vertical) and is equivalent to a single "cell" in the grid.

Grid area

A grid area is a rectangular space on the grid defined by four grid lines: the starting and ending lines for both columns and rows. You can name grid areas and use them to place items in a more semantic and readable way.

Defining the Grid Structure

When defining the grid template columns and rows, you can do it using the grid-template-columns and grid-template-rows properties. These properties accept values like percentages, fixed pixel values, or the fr unit for flexible sizing based on available space.

Grid Lines

Grid lines are invisible by default; you may use the grid-line-visibility property to make them visible for reference during development. This can be helpful for visualizing the grid structure and ensuring accurate item placement.

The display property

You have to use the display: grid; property to make a block level grid container or grid-inline to make an inline grid container.

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

The image above is set to grid as the display property.

Inline image.

Explanation

You’ve noticed the behavior above, when you apply the display:

Grid - When you define a grid container, it acts like a flexible box that expands to fill its parent element by default. This ensures all the rows and columns you define are displayed, even if there isn't enough content to fill them all.

Inline-Grid: In contrast, inline-grid behaves more like inline elements. They only take up the space needed for their content and don't inherently expand to fill the available space.

Grid column, grid rows, & grid gaps.

You can adjust the gap size by using one of the following properties:

• column-gap
• row-gap
• gap

Try with this code and see the result.

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

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

You may also want to set both row and column together, using gap would allow you achieve that.

.grid-container {
     display : grid;
     gap: 20px; | gap: 100px 200px;
}
// The first one being the gap value for row, and the gap at the end. 

Grid lines.

These are lines between the columns (column lines) and rows (row lines) and are used to define where you would like to start placing your items in a container. The properties you could use are grid-row-start and grid-row-end for rows and grid-column-start and grid-column-end for columns.

Grid items

A grid container holds grid objects, which are the individual elements you place in the grid. By default, the container has one grid item for each column per row, but you can configure the grid items to span multiple columns and/or rows.

It is important to understand that we define a grid item’s property on the item, not the container.

Understanding how to edit and manipulate these grid elements is key to successfully mastering a CSS grid.

The Grid Item's Properties

A grid item's properties specify how browsers should layout a specified item within the grid box model.

There are different grid item’s properties; they are:

• grid-column
• grid-row

Let’s go through them one by one in detail with demonstrations.

Grid column property

Grid columns are the vertical divisions of your grid. You define them using the grid-template-columns property. This will allow you to specify the number of columns and their widths.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

In our code above, the grid container is divided into three columns, where the middle column is twice as wide as the other two.

Shorthand: grid column property

This property defines where you can place your item within a column, and you will be able to define where the item will start, and where it will end.

You should note that the grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

Instead of writing this way down below,

.grid-item-one{
   grid-column-start: 1;
   grid-column-end: 3;
}

You could write it this way with shorthand:

.grid-item-one{
   Grid-column: 1 / 3;
}

Remember that it follows the order; grid-column: grid-column-start / grid-column-end;

You can either decide to use the line numbers or use the keyword ‘span’ to define how many columns the item will span.

Example

Using the above example code, our item will start from column 1 and end before column 3.

//html file
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item5">6</div>
  <div class="item5">7</div>
  <div class="item5">8</div>
  <div class="item5">9</div>
</div>


//styles
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 10px;
}

.grid-item-one{
    grid-column: 1 / 3; | 1 / span 2;
}

Grid rows

Similar to the grid columns, grid rows are horizontal divisions of your grids. You define them using the grid-template-rows property

.grid-container {
    display: grid;
    grid-template-rows: 100px 600px 100px;
}

In the scenario above, the grid container is divided into three rows with the specified heights using the grid rows.

Shorthand: grid row property

You can define where the item will start and end. The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

To place an item, you can refer to the line numbers, or use the keyword ‘span’ to define how many rows the item will span.

You can do it this way, defining both the start and the end using these properties

.grid-item-one {
   grid-row-start: 1;
   grid-row-end: 4;
}


// Or use the shorthand 
.grid-item-one {
   grid-row: 1 / 4;
}

Syntax: grid-row: grid-row-start / grid-row-end;
When we define the row 1 / 4. Our item starts at row-line 1 and ends at row-line 4. Or you can define using the keyword span this way.

.grid-item-one {
   grid-row: 1 / span 2;
}

This will span 2 rows.

Placing items on the grid.

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

In this case, the item will span from the first to the third column and occupy the first row. This property works with grid lines in mind.

Grid area

The grid-area property allows you to specify a grid item's size and location within the grid by combining grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

Example

.grid-item-eight {
  grid-area: 1 / 1 / 3 / 3;
}

//or you can use it this way.
.grid-item-eight {
  grid-area: 1 / 1 / span 2 / span 2;
}

In the scenario above, grid-item-one will start at the first row and column, and span two rows and two columns.

Justify content and Align content

Justify-Content

The justify-content property aligns the grid along the inline (horizontal) axis. This property is useful when the grid container is larger than the grid items, allowing you to control the distribution of the empty space. Common values include:

• start: Aligns grid items to the start of the container.
• end: Aligns grid items to the end of the container.
• center: Centers the grid items within the container.
• space-between: Distributes grid items with space between them.
• space-around: Distributes grid items with space around them.
• space-evenly: Distributes grid items with equal space around them.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center | space-between | end | space-around | start | space-evenly ;
}

Align-Content

The align-content property aligns the grid along the block (vertical) axis. Similar to justify-content, this property is useful when the grid container's height is greater than the combined height of the grid items. Common values include:

• start: Aligns grid items to the start of the container.
• end: Aligns grid items to the end of the container.
• center: Centers the grid items within the container.
• space-between: Distributes grid items with space between them.
• space-around: Distributes grid items with space around them.
• space-evenly: Distributes grid items with equal space around them.

.grid-container {
    display: grid;
    grid-template-rows: 100px 100px;
    align-content: center | space-between | end | space-around | start | space-evenly ;
}

Hurray! We’ve covered the fundamentals of grid layouts, but there’s more to explore. In the advanced part 2 of this guide, we’ll dive into complex CSS techniques and provide practical challenges with a solution.

Conclusion

CSS Grid is a robust tool for building responsive and intricate web layouts. Its structured approach using rows, columns, and gaps, combined with the flexibility of grid properties, makes it superior to traditional layout methods like floats.