CSS - Grid Layout: A Beginner's Guide

Hello there, future web design superstar! Today, we're going to embark on an exciting journey into the world of CSS Grid Layout. Don't worry if you've never written a line of code before – I'll be your friendly guide, and we'll take this step-by-step. By the end of this tutorial, you'll be creating sleek, responsive layouts like a pro!

CSS - Grid Layout

What is a Grid Layout?

Imagine you're arranging furniture in a room. You might mentally divide the space into rows and columns to help you organize everything neatly. That's essentially what CSS Grid Layout does for web pages!

CSS Grid Layout is a powerful tool that allows us to create two-dimensional layouts on web pages. It's like having an invisible grid on your webpage where you can place content exactly where you want it. Cool, right?

Grid Elements

Before we dive in, let's familiarize ourselves with some key terms:

Grid Container: This is the parent element that holds all the grid items.
Grid Items: These are the children of the grid container.
Grid Lines: The dividing lines that make up the structure of the grid.
Grid Tracks: The spaces between grid lines (rows or columns).
Grid Cell: The intersection of a row and a column.
Grid Area: A rectangular space surrounded by four grid lines.

Don't worry if these sound confusing now. We'll see them in action soon!

Display Grid Property

Let's start with a simple example. Say we want to create a basic 3x3 grid. Here's how we'd do it:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

Let's break this down:

We set display: grid; on the container to activate Grid Layout.
grid-template-columns: auto auto auto; creates three columns of equal width.
We style the grid items for visibility.

Voila! You've just created your first grid layout. How exciting!

Grid Rows and Columns

Now, let's get a bit more specific with our rows and columns. We can define exact sizes:

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 80px 200px;
}

This creates a grid with:

Three columns: 100px, 200px, and 100px wide
Two rows: 80px and 200px tall

You can also use different units like percentages or the new fr unit (fraction of available space):

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
}

This creates a similar layout, but the columns will resize fluidly based on available space.

Grid Gap

Sometimes, you want some breathing room between your grid items. That's where grid-gap comes in:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

This adds a 10px gap between all rows and columns. You can also set row and column gaps separately:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

CSS Grid Lines

Remember those grid lines we talked about earlier? We can use them to precisely position our items:

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 300px 100px;
  gap: 10px;
}

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

.item2 {
  grid-row: 2 / span 2;
}

.item3 {
  grid-column: 2 / span 2;
}

.item4 {
  grid-column: 4;
  grid-row: 2;
}

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

This creates a complex layout with a header spanning the full width, a side menu, main content area, right sidebar, and footer. Play around with these values to see how they affect the layout!

CSS Grid Properties Reference

Here's a handy table of some common CSS Grid properties:

Property	Description
display: grid;	Defines a grid container
grid-template-columns	Specifies the number and sizes of columns
grid-template-rows	Specifies the number and sizes of rows
grid-gap	Sets the gap between grid items
grid-column-start	Specifies where to start the grid item
grid-column-end	Specifies where to end the grid item
grid-row-start	Specifies where to start the grid item
grid-row-end	Specifies where to end the grid item
grid-area	Specifies the size and location of grid items

And there you have it! You've just taken your first steps into the wonderful world of CSS Grid Layout. Remember, practice makes perfect, so don't be afraid to experiment with different layouts and properties. Before you know it, you'll be creating complex, responsive layouts with ease.

Happy coding, future grid masters!

Credits: Image by storyset