The Ultimate Guide to Mastering CSS Grid

CSS Grid is one of the most powerful layout tools available for web developers. It is a two-dimensional layout system that allows you to easily create complex grid layouts without having to rely on float or positioning properties. In this guide, we will take a comprehensive look at how to master CSS Grid, including all the essential concepts and techniques that will help you build complex, responsive layouts with ease.

Getting Started with CSS Grid

Before we dive into the specifics of CSS Grid, it is essential to understand the basics. First, we need to define a container element, which we will use to create the grid. To do this, we use the display: grid property. Once we have defined the grid container, we can start creating our grid items.

<div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
    </div>

    .container {
      display: grid;
    }

By default, CSS Grid will create a grid with one column and one row. To create a grid with multiple columns and rows, we can use the grid-template-columns and grid-template-rows properties, respectively.

For example, to create a grid with three columns and two rows, we can use the following code:

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

This will create a grid with three columns and two rows, each with an equal width and height.

Placing Grid Items

Now that we have created our grid, we can start placing our grid items within it.

By default, grid items will be placed in the order they appear in the HTML markup, starting from the top-left corner of the grid.

To specify the placement of a grid item, we use the grid-column and grid-row properties. These properties accept a value in the form of start / end, where start and end are grid line numbers.

 <div class="container">
      <div class="item item1">Item 1</div>
      <div class="item item2">Item 2</div>
      <div class="item item3">Item 3</div>
      <div class="item item4">Item 4</div>
      <div class="item item5">Item 5</div>
    </div>

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

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

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

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

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

    .item5 {
      grid-column: 2 / 4;
      grid-row: 2 / 3;
    }

This code will place our grid items in the specified grid cells.

Note that we can also use the span keyword to specify the number of grid cells that a grid item should span.

For example, if we want the first grid item to span two columns and two rows, we can use the following code:

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

This will place the first grid item in the first two columns and first two rows of the grid.

CSS Grid also supports named grid lines, which can make it easier to place grid items.

To define named grid lines, we can use the grid-template-areas property. This property accepts a string of values that represent the grid template. Each value represents a row, and each character within the value represents a grid item. A period (.) represents an empty grid cell.

.container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
        "header header header"
        "sidebar main main";
    }

    .header {
      grid-area: header;
    }

    .sidebar {
      grid-area: sidebar;
    }

    .main {
      grid-area: main;
    }

In this code, we have defined a grid with two rows and three columns. The first row contains three grid cells with the name “header,” and the second row contains two grid cells with the names “sidebar” and “main.” We can then use the grid-area property to place our grid items within the named grid cells.

Responsive Grid Layouts

One of the most significant benefits of CSS Grid is its ability to create responsive layouts. With CSS Grid, we can define different grid templates for different screen sizes, allowing us to create complex, adaptive layouts that work well on all devices.

To create a responsive grid layout, we can use media queries to define different grid templates for different screen sizes. For example, we can define a grid template with three columns for larger screens and two columns for smaller screens:

.container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
        "header header header"
        "sidebar main main";
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
          "header header"
          "main main"
          "sidebar sidebar";
      }
    }

In this code, we have defined a media query that applies a different grid template when the screen size is less than or equal to 768 pixels. The new grid template has two columns and three rows, with the “main” grid item spanning two rows.

Now, let’s put all the concepts we’ve learned into practice by building a simple webpage layout using CSS Grid.

HTML Structure - First, let’s create the HTML structure of our webpage. We’ll use a header, navigation, main content, and footer sections.

<!DOCTYPE html>
    <html>
      <head>
        <title>My Webpage</title>
        <link rel="stylesheet" href="styles.css" />
      </head>

      <body>
        <header>
          <h1>My Webpage</h1>
        </header>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
        <main>
          <article>
            <h2>Article Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </article>
          <aside>
            <h3>Related Links</h3>
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
            </ul>
          </aside>
        </main>
        <footer>
          <p>&copy; 2023 Welcome to my Webpage</p>
        </footer>
      </body>
    </html>

Now that we have our HTML structure,

Let’s define the CSS Grid layout for our webpage. We’ll start by creating a grid container with three columns and two rows, with the first row being the header, the second row being the navigation and main content, and the third row being the footer.

 body {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header header"
        "nav main main"
        "footer footer footer";
    }

Next, we’ll define the grid areas for each section of our webpage. We’ll use the grid-area property to place each section in the appropriate grid cell.

header {
      grid-area: header;
    }

    nav {
      grid-area: nav;
    }

    main {
      grid-area: main;
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-gap: 20px;
    }

    footer {
      grid-area: footer;
    }

In the main section, we’ll create a nested grid layout with two columns and one row, with the first column being the main article and the second column being the related links.

  article {
      grid-column: 1 / span 1;
    }

    aside {
      grid-column: 2 / span 1;
    }

Finally, we’ll add some styling to make our webpage look more visually appealing.

   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #333;
      color: #fff;
      padding: 20px;
    }

    nav {
      background-color: #ccc;
      padding: 10px;
    }

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    nav li {
      display: inline-block;
      margin-right: 10px;
    }

    nav li:last-child {
      margin-right: 0;
    }

    nav a {
      color: #333;
      text-decoration: none;
    }

    main {
    padding: 20px;
    }

    article {
    background-color: #f9f9f9;
    padding: 20px;
    }

    aside {
    background-color: #eee;
    padding: 20px;
    }

    footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
    }

    @media screen and (max-width: 768px) {
    body {
    display: block;
    }

    main {
    margin-top: 20px;
    }

    article {
    margin-bottom: 20px;
    }

    aside {
    margin-bottom: 20px;
    }
    }

Final Result

Now that we’ve defined the CSS Grid layout and added some styling, let’s take a look at the final result.

[CSS Grid Layout Example]

If you want to explore **more advanced CSS Grid techniques, **you can check out the following resources:

CSS Grid Garden: A fun and interactive game that helps you learn CSS Grid by solving puzzles.
CSS Grid Layout by Rachel Andrew: A comprehensive guide to CSS Grid layout by one of the leading experts in the field.
Grid by Example: A collection of examples and resources for CSS Grid.
CSS-Tricks Guide to Grid: A comprehensive guide to CSS Grid by CSS-Tricks.
Mozilla Developer Network (MDN) Guide to Grid: A thorough guide to CSS Grid by Mozilla Developer Network.

By mastering CSS Grid, you can create stunning and complex web page layouts that adapt to any screen size and enhance the user experience. We hope this guide has been helpful in your journey to becoming a CSS Grid expert.

Thanks for reading

👏 Please clap for the story and follow me 👉
🔔 Follow me: LinkedIn | Twitter | Github

Blog