How to Use CSS Grid for Responsive Layouts

CSS Grid is a two-dimensional layout system that lets you arrange elements by rows and columns at the same time. Unlike Flexbox, which works in one dimension, Grid is ideal for building more complex page layouts such as dashboards, photo galleries, or full-page structures. This article covers how to use CSS Grid with real, easy-to-understand examples.

What Is CSS Grid?

CSS Grid Layout is a CSS module that provides a row- and column-based grid system. With Grid, you can define column sizes, row sizes, the spacing between cells, and the position of each element with great precision. Browser support for CSS Grid is already excellent — almost all modern browsers support it.

Enabling CSS Grid

Just like Flexbox, Grid is enabled with the display property:

.container {
  display: grid;
}

After this, all direct child elements become grid items.

Defining Columns with grid-template-columns

This is the most important property in CSS Grid. You define the number and size of the columns:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columns of 200px */
}

/* Using the fr (fraction) unit */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 columns of equal width */
}

/* Shorthand with repeat() */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* same as above */
}

Defining Rows with grid-template-rows

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto 60px; /* header, content, footer */
}

Spacing Between Cells with gap

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;         /* spacing between rows and columns */
  /* row-gap: 16px; */
  /* column-gap: 24px; */
}

Practical Example: A Responsive Three-Column Layout

Here is how to build a responsive three-column gallery using auto-fill and minmax():

<div class="gallery">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
  <div class="card">Item 4</div>
  <div class="card">Item 5</div>
  <div class="card">Item 6</div>
</div>

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: #e3f2fd;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}
</style>

With auto-fill and minmax(200px, 1fr), the number of columns adjusts automatically based on the screen width.

Practical Example: A Full-Page Layout

CSS Grid is perfect for building a classic page structure (header, sidebar, content, footer):

<div class="page">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

<style>
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
  gap: 8px;
}

.header  { grid-area: header;  background: #1e293b; color: white; padding: 16px; }
.sidebar { grid-area: sidebar; background: #f1f5f9; padding: 16px; }
.content { grid-area: content; background: white;   padding: 16px; }
.footer  { grid-area: footer;  background: #334155; color: white; padding: 16px; }
</style>

Placing Items at Specific Positions

You can set an item's position explicitly using grid-column and grid-row:

.wide-item {
  grid-column: 1 / 3; /* start at column 1, end before column 3 */
}

.tall-item {
  grid-row: 1 / 3; /* spans two rows */
}

/* Shorthand */
.span-item {
  grid-column: span 2; /* spans 2 columns */
}

Tips for Using CSS Grid

• Use grid-template-areas for layouts that are easier to read and understand.
• Combine auto-fill with minmax() for responsive layouts without media queries.
• Use the browser DevTools (F12) to visualize the grid lines.
• Flexbox and Grid can be used together — Grid for large layouts, Flexbox for small components.

Conclusion

CSS Grid is the best solution for building complex, responsive two-dimensional layouts. By understanding grid-template-columns, grid-template-areas, and functions like repeat() and minmax(), you are ready to build all kinds of modern web page layouts. Keep practicing by building various page structures with CSS Grid.