Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

CSS Grids Simplified

Grid is one of the most powerful tools in CSS, but also the most confusing one. Once you master creating layouts with CSS grids, you’ll wonder how you lived without it.

In this course, we'll use real world examples and layouts to learn about the CSS properties related to grid. Hopefully, by the conclusion of this series, you'll have a much better understanding of the finer details.

Progress

Series Info

Episodes
12
Run Time
1h 29m
Difficulty
Intermediate
Last Updated
Jun 2, 2022
Version
Latest
Play Series

Series Episodes

  1. Episodes (12)

    1. 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.

    2. 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.

    3. 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.

    4. 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.

    5. 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.

    6. 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.

    7. 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.

    8. 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.

    9. 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.

    10. 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.

    11. 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.

    12. 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.

Continue Learning

JavaScript Essentials for PHP Developers thumbnail

JavaScript Essentials for PHP Developers

With Jeremy McPeak

Unlock the power of JavaScript with this tailored series designed for PHP developers looking to expand their skills. Learn key concepts, syntax, and practical applications to seamlessly transition from server-side to client-side coding.

  • 35 Episodes
Object-Oriented Principles in PHP thumbnail

Object-Oriented Principles in PHP

With Jeffrey Way

Beginning developers are usually first introduced to procedural programming. But, before too long, they level up. Suddenly, an entirely different paradigm is introduced: object-oriented programming. Little do they know that they'll spend years researching and learning exactly what it means to work with objects and messages. In this course, you'll be introduced to the core principles of object-oriented programming through the lens of PHP. We'll begin with the basic constructs and work our way up. The only prerequisite is an elementary understanding of the PHP language and syntax.

  • 10 Episodes
PHP For Beginners thumbnail

PHP For Beginners

With Jeffrey Way

We all start somewhere. For programming, this series is that first step. I've designed it specifically for newcomers to, not just PHP, but programming in general. Here, you'll learn the fundamentals of PHP - all the way down to defining basic variables and arrays.Think of this series as a key stepping stone for your programming journey.

  • 50 Episodes
JavaScript: The First Steps thumbnail

JavaScript: The First Steps

With Andre Madarang

JavaScript is one of the most popular and versatile programming languages when working on the web. It makes for a great first language to learn as you can get started with any web browser and its built-in devtools.This beginner-focused series will take you through the fundamentals of JavaScript and give you a solid understanding of how the language works. Once the fundamentals are under your belt, you should be comfortable writing JavaScript in your own applications or continue your JavaScript journey by learning new frameworks or technologies that are built on top of it.

  • 30 Episodes
CSS Flexbox Simplified thumbnail

CSS Flexbox Simplified

With Shruti Balasa

Flexbox is no longer an advanced topic in CSS. Today, it's an essential tool for styling modern web pages. In this course, we'll use a variety of real-world examples and components to explore all of the CSS properties related to flexbox. These examples will help you to better understand the core concepts and commit them to memory.

  • 12 Episodes