Grid Basics

Part of the CSS Mastery section of Coddy's HTML journey — lesson 31 of 43.

CSS Grid is a layout system that lets you easily create web pages with rows and columns. It’s great for building complex and responsive layouts without needing floats or tricky positioning. Plus, it works in all modern browsers.

To create a grid container, use the display property:

.container {
  display: grid;
}

Define columns in your grid using grid-template-columns with px or fr units (fractions):

/* This creates three columns where the middle column takes up twice as much space as the other two. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Define rows with grid-template-rows. Use the gap property to add space between the grid items.

/* Creates a grid with two rows: the first is 100px high, the second is 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a CSS rule for a class named grid-container that:

Sets the display property to create a grid
Creates three equal-width columns using the fr unit
Creates two rows: the first 150px tall and the second 250px tall
Adds a 20px gap between all grid items

Write only the CSS code for the grid-container class.

Cheat sheet

CSS Grid is a layout system for creating web pages with rows and columns. To create a grid container, use display: grid:

.container {
  display: grid;
}

Define columns using grid-template-columns with px or fr units (fractions):

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns, middle is twice as wide */
}

Define rows with grid-template-rows and add spacing with gap:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Two rows with specific heights */
  gap: 20px; /* Space between grid items */
}

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-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 class="item">Item 6</div>
    </div>
</body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.