In the world of web development, a responsive grid system is essential to ensure that websites adapt well to all screen sizes. While Bootstrap provides a powerful grid system, there are times when developers want more control over the layout or need a minimal, custom solution. That’s where creating your own grid system comes into play.
In this blog post, we’ll walk you through how to build a custom, responsive CSS grid system that mimics the behavior of Bootstrap. This will give you the flexibility of having a grid that adjusts automatically based on different device screen sizes—just like Bootstrap—while allowing you to control the design and performance as you see fit.
Why Create a Custom Grid System?
While frameworks like Bootstrap are incredibly useful, they can sometimes feel “heavy” or overly prescriptive, especially if you’re only using the grid and don’t need all the other features that come with it.
By creating a custom grid system from scratch, you can:
- Optimize performance: Only include the necessary grid styles, reducing bloat.
- Get more control: Tailor the grid to your exact needs (e.g., setting specific breakpoints).
- Learn Flexbox: Using Flexbox for grid layouts can provide more flexibility than traditional methods, and it’s a great skill to have.
So, let’s break down the steps to create a minimal yet fully responsive grid system using just CSS.
Understanding the Grid System Basics
Before we jump into the code, let’s clarify the structure of a responsive grid system:
- 1. Container: This is the outer wrapper that holds all grid elements.
- 2. Row: A container that defines the flex layout for the columns.
- 3. Columns: These are the individual grid items that we will adjust at different screen sizes.
Just like Bootstrap, we’ll define 12 equal-width columns for our grid.
Setting the Base Grid Structure
We need three core elements:
- container: A wrapper that holds all grid elements and controls the width.
- row: A flexbox container to arrange columns horizontally.
- col-*: Columns that take up a specific width, with breakpoints for responsiveness.
The HTML structure of our grid looks like this:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-6">Column 1</div>
<div class="col-sm-4 col-md-6">Column 2</div>
<div class="col-sm-4 col-md-6">Column 3</div>
<div class="col-sm-4 col-md-6">Column 4</div>
<div class="col-sm-4 col-md-6">Column 5</div>
<div class="col-sm-4 col-md-6">Column 6</div>
</div>
</div>
- The container holds the entire content.
- The row makes use of Flexbox to align the columns.
- The col-* classes represent columns, and we will define their width at different screen sizes.
How Columns Behave on Different Screen Sizes
When you use classes like col-sm-4, col-md-6, or col-lg-3, you are defining how wide the columns should be at different breakpoints. Here’s how it works:
Smaller Screens (<576px)
On small devices, the columns will typically take up 100% width. That means they stack vertically and take up the entire screen width. This is the default behavior when you apply col-sm-*.
Medium Screens (≥768px)
On medium-sized screens, you can define how much width the columns should take up. For example:
- col-md-6: Takes up 50% width.
- This allows two columns per row on tablet devices.
Larger Screens (≥992px and ≥1200px)
For large devices, we can define how many columns fit on each row:
- col-lg-3: Makes each column take up 25% width, so there are 4 columns per row.
- col-xl-2: Makes each column take up 16.66% width, so there are 6 columns per row on extra-large screens.
This ensures that the layout adapts seamlessly across different screen sizes.
Building the Grid with Flexbox
How Flexbox Makes It Easy
One of the key features of modern CSS is Flexbox, which simplifies the creation of responsive layouts. With Flexbox, you can easily control the alignment, order, and size of columns in your grid.
Here’s the CSS for our custom grid system:
Complete CSS Code for Custom Grid
/* Container - Centered with padding and fixed width */
.container {
width: 100%;
max-width: 1140px; /* Maximum width for large screens */
margin-right: auto;
margin-left: auto;
padding-right: 1rem;
padding-left: 1rem;
}
/* Container Fluid - Full width, no padding */
.container-fluid {
width: 100%;
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
}
/* Row (Flexbox for columns) */
.row {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
/* Default behavior for all .col-* classes */
[class*="col-"] {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
padding-right: 1rem;
padding-left: 1rem;
}
/* Base column sizes */
.col-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* Small screens (≥576px) */
@media (min-width: 576px) {
.col-sm-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
.col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-sm-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-sm-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
.col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Medium screens (≥768px) */
@media (min-width: 768px) {
.col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; }
.col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Large screens (≥992px) */
@media (min-width: 992px) {
.col-lg-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
.col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-lg-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Extra Large screens (≥1200px) */
@media (min-width: 1200px) {
.col-xl-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-xl-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
.col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-xl-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-xl-6 { flex: 0 0 50%; max-width: 50%; }
.col-xl-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-xl-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-xl-9 { flex: 0 0 75%; max-width: 75%; }
.col-xl-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-xl-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}
Conclusion:
By using Flexbox, you can easily create a responsive, mobile-first grid system that adapts to various screen sizes. This custom grid system will work similarly to Bootstrap’s grid, but with more control and fewer unnecessary features.
Here’s a summary of how it works:
- Smaller devices: The columns stack and take 100% width.
- Medium devices: Columns take 50% width.
- Large devices: Columns can take 25% width, giving you 4 columns per row.
- Extra-large devices: Columns take 16.66%, allowing 6 columns per row.
This approach gives you the flexibility to customize the grid system based on your specific design needs, making it a great solution for modern, responsive web development.
