Understanding CSS Grid

Hi everyone!

Let’s explore CSS Grid together—a powerful feature that helps us build two-dimensional layouts on the web. In this guide, we’ll start from the basics and work our way up to controlling the size and position of elements with more flexibility. If you're already familiar with Flexbox, Grid will feel like a fun and useful complement!

CSS Grid is perfect for building complex layouts like dashboards, photo galleries, or any page that requires a clean structure both horizontally and vertically. Let’s dive in!

What is Grid?

By adding display: grid to an element, we turn it into a grid container. While Flexbox works in one direction (horizontal or vertical), Grid works in both—columns and rows simultaneously.

Grid was introduced to solve layout challenges that couldn’t easily be handled by Flexbox or older techniques like float. Think of Grid as a two-dimensional layout system that gives you full control over element placement and sizing.

Why Use Grid?

• Great for large-scale layouts like headers, sidebars, and main content.

• Naturally responsive.

• Flexible sizing with fr, auto, minmax(), and more.

Example:

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

Grid doesn’t replace Flexbox—it complements it. Use Grid to structure the page layout, and Flexbox to align content inside each section.

Sizing the Grid

Sizing your grid is crucial to maintain a consistent and responsive layout. Here are some useful sizing techniques:

1. Fixed Sizes (px, rem)

Use for consistent dimensions.

.container {
  grid-template-columns: 400px 800px;
  grid-template-rows: 100px 200px;
}

2. Auto Sizing (auto)

Adapts to the content size.

.container {
  grid-template-columns: 200px auto;
  grid-template-rows: auto auto;
}

3. Fractional Units (fr)

Divides available space proportionally.

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

4. minmax() Function

Sets minimum and maximum size.

.container {
  grid-template-columns: minmax(200px, 500px) auto;
}

5. repeat() Function

Avoids repetitive declarations.

.container {
  grid-template-columns: repeat(8, 100px);
}

6. Auto Rows & Columns

Defines sizes for items that overflow the template.

.container {
  grid-auto-rows: 50px;
  grid-auto-columns: 200px;
}

💡 Tip: Use Chrome DevTools > Layout > Grid overlay to visualize your grid in real time.

Placing Elements in the Grid

Once your grid is set up, it’s time to control the placement of the items inside it.

Key Terminology

• Grid Container: the element with display: grid

• Grid Items: direct children of the container

• Tracks: rows & columns

• Cells: intersections of rows and columns

• Lines: boundaries between cells

Basic Placement

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

Using grid-column and grid-row

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Shorthand:

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

Align Content with Flexbox

.item {
  display: flex;
  justify-content: center;
  align-items: center;
}

Using grid-area

.item {
  grid-area: 2 / 1 / 4 / 3;
}

Use this shorthand to define start and end positions in one line.

Reordering with order

.item {
  order: 1;
}

Negative Indexing

.item {
  grid-column-end: -1; /* last column line */
}

Overlapping Elements

.item1 {
  grid-area: 1 / 1 / 3 / 3;
}
.item2 {
  grid-area: 2 / 2 / 4 / 4;
  background-color: #ff660080; /* transparency */
}

Time to Practice!

Try creating a layout with CSS Grid using these techniques:

• grid-area

• minmax()

• repeat()

• Combine with Flexbox for internal alignment

For interactive learning, check out Grid Garden at: https://cssgridgarden.com

Don’t forget to activate the grid overlay in Chrome DevTools so you can clearly see your grid structure.

Happy coding, and keep exploring CSS Grid! If you create something awesome, share it with your friends—learning is more fun together! 🚀

Baca juga