How to Build a Responsive Grid System with Media Queries from Scratch

Creating a responsive grid system is essential for modern web design. It allows your website to adapt seamlessly to different screen sizes, providing a better user experience. In this guide, we’ll walk through building a simple yet effective grid system using CSS media queries from scratch.

Understanding the Basics of a Grid System

A grid system divides a webpage into columns and rows, enabling flexible content placement. Typically, it involves defining container widths, column widths, and spacing. Media queries help adjust these parameters based on device screen size.

Step 1: Set Up the HTML Structure

Start with a simple HTML layout. Use a container div, and inside it, create multiple item divs for your grid content.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

Step 2: Basic CSS for the Grid

Define the container as a flexbox and set default widths for the items. This creates a simple, responsive layout.

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-item {
  flex: 1 1 100%; /* Full width on small screens */
  background-color: #f2f2f2;
  padding: 20px;
  box-sizing: border-box;
}

Step 3: Add Media Queries for Responsiveness

Use media queries to change the number of columns based on screen size. For example, on tablets and desktops, display multiple columns.

@media (min-width: 600px) {
  .grid-item {
    flex: 1 1 calc(50% - 10px); /* Two columns on screens wider than 600px */
  }
}

@media (min-width: 900px) {
  .grid-item {
    flex: 1 1 calc(33.33% - 10px); /* Three columns on screens wider than 900px */
  }
}

Step 4: Final Tips and Best Practices

Test your grid system across various devices to ensure responsiveness. Adjust breakpoints and column widths as needed. Using flexible units like percentages and calc() helps maintain fluid layouts. Remember to add spacing and padding for visual clarity.

Building your own grid system from scratch gives you full control over layout behavior. Combine this with media queries for a truly responsive design tailored to your needs.

Table of Contents