Mohamed Ibrahim

Everything You Need to Know About CSS Grid and Flexbox🌐🎨

Mohamed Ibrahim's photo
Mohamed Ibrahim
·

7 min read

When it comes to modern web design, two of the most powerful layout systems in CSS are CSS Grid and Flexbox. Both offer incredible flexibility for creating complex layouts, but they each have distinct purposes and strengths. This article will help you understand the differences between them, and how to use each effectively in your web development projects.

1. What is CSS Grid? 🧑‍💻

CSS Grid Layout is a two-dimensional layout system. This means it allows you to work with both rows and columns simultaneously. It’s perfect for creating complex layouts, like multi-column designs, magazine-style grids, or responsive layouts with varying sizes.

How CSS Grid Works ⚙️

CSS Grid divides the page into rows and columns, which are then populated with items (like divs or images). You can explicitly define the size and position of each grid item, allowing you to create a flexible and dynamic layout. With CSS Grid, you can easily create layouts without relying on floats or positioning.

Key Properties of CSS Grid:

  • grid-template-columns and grid-template-rows: These properties define the number of columns and rows, as well as their size.

  • grid-gap: This defines the space between rows and columns.

  • grid-column and grid-row: These properties allow you to place grid items in specific locations within the grid.

Basic Example: CSS Grid Layout 🔲

Let’s say you want to create a basic 3-column layout. With CSS Grid, this is easy:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr */
  grid-gap: 20px;
}

.item {
  background-color: red;
  padding: 100px;
}

Preview:

Basic Grid Layout

In this example, the .container has three equal columns (1fr stands for a flexible unit, which takes up a fraction of the available space). The grid-gap property adds space between grid items.

Common Example: Create Website Layout 📍

You can create website layout with grid system easily:

<!-- Header -->
<div class="header">
  <h1>Header</h1>
</div>

<!-- Layout -->
<div class="layout">

  <!-- Sidebar on left -->
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>Content for the sidebar goes here.</p>
  </div>

  <!-- Main content -->
  <div class="main">
    <h2>Main Content</h2>
    <p>This is the main content area.</p>
  </div>

</div>

<!-- Footer -->
<div class="footer">
  <h3>Footer</h3>
  <p>Footer information goes here.</p>
</div>

CSS Code:

.header {
  background-color: #2c3e50;
  color: white;
  text-align: center;
}

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

.main {
  background-color: #ecf0f1;
  padding: 20px;
}

.sidebar {
  background-color: #bdc3c7;
  padding: 20px;
}

.footer {
  background-color: #34495e;
  color: white;
  text-align: center;
}

Preview:

Grid common example

This creates a layout with a header that spans across all columns, a sidebar, a main content area, and a footer. The ability to control where each item goes within the grid is a huge advantage of using CSS Grid.

2. What is Flexbox? 🔄

Flexbox (Flexible Box Layout) is a one-dimensional layout model. Unlike Grid, which handles both rows and columns, Flexbox is designed to lay out items in a single direction: either horizontally (in a row) or vertically (in a column). It’s perfect for simpler, smaller components, or for distributing space along a single axis.

How Flexbox Works 🛠️

Flexbox uses the flex property to control how items within a container are sized and spaced. The items within a flex container can be aligned, justified, and spaced based on the available space in the container. Flexbox is ideal for creating responsive layouts where the size of elements needs to adjust dynamically depending on the container.

Key Properties of Flexbox:

  • display: flex: This activates the Flexbox layout on the container.

  • justify-content: Aligns items horizontally (e.g., left, center, space-between).

  • align-items: Aligns items vertically (e.g., top, center, bottom).

  • flex-wrap: Determines if items should wrap onto multiple lines if necessary.

Basic Example: Flexbox Layout 🧭

Let’s create a simple navigation bar using Flexbox:

<div class="navbar">

  <!-- Brand / Logo -->
  <a href="#" class="brand">MyBrand</a>

  <!-- Navbar Links (Home, About, etc.) -->
  <div class="navbar-links">
    <a href="#" class="item">Home</a>
    <a href="#" class="item">About</a>
    <a href="#" class="item">Services</a>
    <a href="#" class="item">Contact</a>
    <a href="#" class="item">Blog</a>
    <a href="#" class="item">Careers</a>
    <a href="#" class="item">Portfolio</a>
    <a href="#" class="item">FAQ</a>
  </div>

  <!-- User options (Login, Profile, Logout) -->
  <div class="user-options">
    <a href="#" class="item">Login</a>
    <a href="#" class="item">Sign Up</a>
  </div>

</div>

.navbar {
  /* Flex box */
  display: flex;
  justify-content: space-between;
  align-items: center;


  padding: 10px 20px;
  background-color: #3498db;
}

/* Logo or brand */
.navbar .brand {
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

/* Navbar items */
.navbar .item {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
}

/* Right side user options (login/signup) */
.navbar .user-options {
  display: flex;
  align-items: center;
}

.navbar .user-options a {
  color: white;
  padding: 5px 10px;
  text-decoration: none;
}

Preview:

Flex Box Example

In this example:

  • display: flex activates Flexbox on the navbar.

  • justify-content: space-between spaces the items out evenly with maximum space between them.

  • align-items: center vertically aligns the items in the center.

In this example:

  • The logo will be on the left side.

  • The menu items (Home, About, Services) will be spaced evenly across the navbar.

  • Everything will be vertically centered in the navbar because we used align-item: center

Example: Flexbox Wrap and Alignment 🧩

Flexbox allows items to wrap into the next line when necessary.

Here’s an example with the flex-wrap property:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
}

.item {

  /* flex-grow: 1; */
  /* flex-shrink: 1; */
  /* flex-basis: 300px; */
  flex: 1 1 300px;

  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

Preview:

Flex Wrap Image

In this layout:

  • flex-wrap: wrap ensures that items can wrap onto new lines when there isn’t enough space.

  • flex: 1 1 300px ensures that each item takes up at least 300px, but can grow or shrink depending on the available space.

3. CSS Grid vs. Flexbox: When to Use Each 🤔

While both Grid and Flexbox are used for layout design, they have distinct
use cases:

  • Use CSS Grid for two-dimensional layouts where you need both rows and columns. It’s perfect for complex designs, such as image galleries, dashboards, and web pages with multiple sections.

  • Use Flexbox for simpler, one-dimensional layouts where you want items to be spaced out evenly or aligned along one axis (either horizontally or vertically). Flexbox is ideal for navigation bars, footers, and simple responsive layouts.

When to Use CSS Grid ✅

  • Complex layouts that require both rows and columns.

  • Creating media galleries or multi-column designs.

  • Positioning items with specific grid areas.

When to Use Flexbox ✅

  • For smaller components like navbars or buttons.

  • One-dimensional layouts such as aligning a set of items in a row or column.

  • Distributing space across items dynamically.

4. Combining Grid and Flexbox 🔗

You don’t have to choose one over the other. In fact, CSS Grid and Flexbox work really well together, and you can use them in the same layout. For example, you might use Grid for the main page layout, while using Flexbox for individual items within a section.

Example: Combining Grid and Flexbox 🔄

Here’s how you might use both systems in one page layout:

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
</div>

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

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px;
  background-color: #ddd;
}

.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  background-color: #ddd;
}

Preview:

Grid and Flexbox

In this example:

  • The overall layout is managed with CSS Grid.

  • The sidebar and main content areas use Flexbox for alignment and spacing within their respective columns.

5. Responsive Design with Grid and Flexbox 📱

Both Grid and Flexbox are excellent tools for creating responsive layouts that adapt to different screen sizes. CSS Grid is particularly useful for creating multi-column layouts that adjust based on screen size, while Flexbox allows items to adjust and wrap based on the available space.

Example: Responsive Grid Layout 📊

This is how you might make a simple grid layout responsive with CSS Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

At screen widths smaller than 768px, the layout switches to a single column, ensuring a better experience on **smaller devices.

Conclusion 🎉

Both CSS Grid and Flexbox are essential tools for modern web design. While CSS Grid is perfect for complex two-dimensional layouts, Flexbox excels at simpler one-dimensional designs. Understanding when to use each layout system will help you build more flexible and responsive websites. In many cases, combining both systems will allow you to create even more sophisticated and dynamic layouts.

By mastering both CSS Grid and Flexbox, you'll have the tools you need to create clean, responsive, and effective web designs. 🚀

Follow Me

Thank you for reading my blog. 🚀 You can follow me on GitHub and connect on Twitter

CSSHTML5flexboxJavaScriptBeginner Developers