CSS Lesson 16 – CSS Grid Basics | Dataplexa

LESSON 16

CSS Grid Basics

Build flexible two-dimensional layouts using CSS Grid to arrange content in rows and columns simultaneously.

CSS Grid is a powerful layout system that creates two-dimensional layouts — meaning you control both rows AND columns at the same time. Think of it like creating a digital spreadsheet where you can place content exactly where you want it. While Flexbox excels at one-dimensional layouts (either horizontal OR vertical), Grid shines when you need precise control over both directions. The WanderLust team uses Grid for their destination gallery page, where travel photos need to arrange in a perfect magazine-style layout.

Understanding Grid Containers vs Grid Items

Before diving into properties, you need to understand the two main players in any Grid layout:

Grid Container

The parent element that gets display: grid. This creates the grid structure and defines how many rows/columns exist.

Grid Items

The direct children inside the grid container. These automatically place themselves in grid cells, or you can position them manually.

Creating Your First Grid Layout

The WanderLust team wants to create a simple three-column layout for their featured destinations. Here's how Grid makes this incredibly easy:

/* Create a 3-column grid for WanderLust destinations */
.destinations-grid {
  display: grid; /* Turn this container into a grid */
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  gap: 20px; /* Space between all grid items */
}

.destination-card {
  background: #f8fafc;
  padding: 20px;
  border-radius: 12px;
}

What just happened?

The 1fr 1fr 1fr creates three columns that each take up one fraction of available space — meaning they're perfectly equal. The gap property adds consistent spacing between all items, both horizontally and vertically. Try this: Change one column to 2fr to make it twice as wide as the others.

Understanding Grid Template Columns

The grid-template-columns property defines your column structure. You have several ways to specify column sizes:

/* Different ways to define WanderLust grid columns */
.grid-pixels {
  grid-template-columns: 200px 200px 200px; /* Fixed pixel widths */
}

.grid-mixed {
  grid-template-columns: 250px 1fr 100px; /* Fixed-Flexible-Fixed */
}

.grid-repeat {
  grid-template-columns: repeat(4, 1fr); /* Four equal columns */
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive! */
}

The repeat() function saves you from typing repetitive column definitions. Instead of writing 1fr 1fr 1fr 1fr, you can write repeat(4, 1fr).

Working with Grid Rows

Just like columns, you can control row heights using grid-template-rows. The WanderLust team wants their hero section to take up specific vertical space:

/* Create a WanderLust page layout with header, content, footer */
.page-layout {
  display: grid;
  grid-template-rows: 80px 1fr 60px; /* Header-Content-Footer */
  height: 100vh; /* Full viewport height */
  gap: 0; /* No gaps for full page layout */
}

.header { background: #0ea5e9; color: white; padding: 20px; }
.content { background: #f8fafc; padding: 40px; }
.footer { background: #0f172a; color: white; padding: 20px; }

What just happened?

The rows are set to 80px (fixed header), 1fr (flexible content that grows), and 60px (fixed footer). The middle section automatically fills all remaining vertical space. Try this: Change the viewport height and watch how only the content area adjusts.

The Magic of Grid Gap

The gap property (also called grid-gap in older browsers) controls spacing between grid items. Think of it as invisible padding that appears between every row and column:

/* Different gap approaches for WanderLust layouts */
.gallery-tight {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px; /* Minimal spacing for photo galleries */
}

.gallery-spacious {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* Generous spacing for readability */
}

.gallery-custom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 40px; /* Different vertical spacing */
  column-gap: 20px; /* Different horizontal spacing */
}

Grid vs Flexbox: When to Use What

Both Grid and Flexbox are layout tools, but they excel in different situations. Here's when the WanderLust team chooses each:

Use CSS Grid For:

• Two-dimensional layouts (rows AND columns)
• Page layouts (header, content, sidebar, footer)
• Photo galleries and card grids
• Complex dashboard layouts

Use Flexbox For:

• One-dimensional layouts (single row OR column)
• Navigation bars
• Centering content
• Distributing space between items

Real-World Example: WanderLust Navigation

The WanderLust navigation bar works better with Flexbox, but their main page layout needs Grid:

/* Flexbox for navigation (one-dimensional) */
.navbar {
  display: flex; /* Horizontal arrangement */
  justify-content: space-between; /* Logo left, links right */
  align-items: center; /* Vertical centering */
  padding: 0 40px;
}

/* Grid for page layout (two-dimensional) */
.page-grid {
  display: grid;
  grid-template-columns: 250px 1fr; /* Sidebar + main content */
  grid-template-rows: auto 1fr auto; /* Header + content + footer */
  min-height: 100vh;
}

What just happened?

The navbar uses Flexbox for simple horizontal distribution, while the page uses Grid for complex two-dimensional layout. Notice how the footer spans both columns using grid-column: 1 / -1. Try this: Resize your browser to see how each layout system responds differently.

Common Grid Patterns

The WanderLust team uses these three Grid patterns constantly. Master these and you'll handle most layout challenges:

Pro Tip: Start Simple

Begin with basic grid-template-columns and gap. Once that works perfectly, add complexity. The most common beginner mistake is trying to create advanced layouts before mastering these fundamentals.

Equal Columns

repeat(3, 1fr)

Perfect for card layouts and galleries

Sidebar Layout

250px 1fr

Fixed sidebar, flexible content area

Responsive Grid

auto-fit, minmax(250px, 1fr)

Automatically wraps to new rows

CSS Grid revolutionizes how you approach web layouts. Unlike the old days of floats and positioning hacks, Grid gives you precise control over both horizontal and vertical space. The WanderLust team can now create magazine-quality layouts that work perfectly across all devices. The key insight is understanding when to use Grid versus Flexbox. Grid excels at two-dimensional layouts where you need control over both rows and columns simultaneously. Flexbox shines for one-dimensional arrangements and component-level alignment.

Quiz

Up Next: CSS Grid Advanced

Master advanced Grid techniques like named grid lines, grid areas, and responsive layouts that adapt automatically to any screen size.

← Previous Course Index Next →