CSS Grids Simplified

First Look at CSS Grid

Let’s begin with a very simple layout. Within the first two minutes of this video, you’ll create your first grid layout. And in the next two minutes, you’ll learn how to make it responsive.

Sizing Cells

You’re now familiar with a few units for sizing grid columns. Now, let’s explore some more units and how they affect a grid layout.

Creating Rows

So far, we’ve only created columns and specified dimensions for the same. Let’s now learn how to create rows and adjust their respective dimensions.

Spacing Between Cells

Rows and columns can be spaced in a variety of ways in a CSS grid. Let’s look into the various CSS properties and values available for controlling spaces between individual cells.

Horizontal and Vertical Spacing

Grid is two-dimensional. The size of content in one cell affects the size of all other cells in the same row and same column. Sometimes, this can make the contents of other cells not align the way we wish. Let’s learn how to align the content within rows and columns.

Single Cell Alignment

Some layouts require different alignment for content in different cells in the same row or same column. Let’s learn about the CSS properties that could be used on individual grid cells for their alignment.

Merge and Swap Cells

Grid offers powerful capabilites for spanning across mutliple rows and columns. We can even take any cell and place it elsewhere in the grid with ease. Let’s learn how to do that using grid lines.

Named Grid Areas

We’ve learned how to span across multiple rows and columns and change the placement of content within a grid using grid lines. Now, let’s move and review how to achieve the same using names grid areas.

Advanced Sizing Values

Now that we’re familiar with creating grid columns and rows, and controlling alignment and placement of content, it’s time to explore some advanced values that we can use for sizing our columns and rows.

Responsive Grids Without Media Queries

With grid, it’s possible to achieve a responsive layout without the use of media queries. Let’s learn about this magical rule now.

Auto Flow and Sizing Implicit Grids

Grid has a default flow for items. In this episode, we’ll learn how to configure that. We’ll also review implicit grids and their sizing.

Put Your Learning to the Test

We have now learned almost everything there is to know about CSS grid. It’s time to put your new skills to the test, and apply some of these concepts in combination to build a three-level nested grid layout.