Reza Mauliadi
Simplify Your Layouts with CSS Grid and Handy Generators

Photo by Christian Lue on Unsplash

Simplify Your Layouts with CSS Grid and Handy Generators

Reza Mauliadi's photo
Reza Mauliadi
·

6 min read

Table of contents

Creating modern, responsive web layouts doesn’t have to be hard. In today’s post, I’m sharing a simple way to design your page using CSS Grid. I’ll explain how CSS Grid works (with both basic and advanced code examples), explore some popular UI libraries that use grid systems and introduce two fantastic generators—CSS Grid Generator and Tailwind Grid Generator. Thanks to @KristjanRetter for creating these awesome tools!

Introduction

If you’re new to web design or simply looking for an easier way to build flexible layouts, CSS Grid is a game-changer. It lets you create complex structures with ease, arranging your content in rows and columns without the headache of older layout methods. You can use tools like CSS Grid Generator and Tailwind Grid Generator as a starting point to learn and implement CSS Grid.

How CSS Grid Works

CSS Grid is a powerful layout system that lets you design two-dimensional layouts—both rows and columns. For a comprehensive guide, check out Mozilla MDN's CSS Grid Layout documentation.

Basic Concepts

  • Grid Container and Items: Declare a container as a grid with display: grid;. All direct children become grid items.

  • Rows and Columns: Use properties like grid-template-columns and grid-template-rows to define your grid structure.

  • Gaps and Alignment: Set spacing between items with the gap property, and align items using various alignment properties.

  • Responsive Design: Easily change grid configurations using media queries, so your layout adapts to any screen size.

Basic Code Example

/* Define the grid container */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 10px; /* 10px gap between grid items */
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Result:

Advanced CSS Grid Techniques

CSS Grid isn’t limited to simple rows and columns—it supports complex layouts with features like grid areas, named lines, and subgrids.

I am going to show example only for grid areas. Grid areas allow you to create a layout by assigning names to different parts of the grid.

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">
    <div class="sidebar-title">Sidebar</div>
    <div class="sidebar-item">Item 1</div>
    <div class="sidebar-item">Item 2</div>
    <div class="sidebar-item">Item 3</div>
  </div>
  <div class="main">
    <div class="main-title">Main</div>
    <div class="main-item">Content 1</div>
    <div class="main-item">Content 2</div>
    <div class="main-item">Content 3</div>
    <div class="main-item">Content 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

/* Grid container with defined areas */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 12px;
}

/* Assigning header grid area */
.header {
  grid-area: header;
}

/* Assigning footer grid area */
.footer {
  grid-area: footer;
}

/* Assigning sidebar grid area and make it as a nested grid */
.sidebar {
  grid-area: sidebar;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 12px;
}
/* Sidebar title spans two rows */
.sidebar-title {
  grid-row: 1 / 3;
}

/* Assigning main grid area and make it as a nested grid with 4 columns */
.main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* Main title spans all columns */
.main-title {
  grid-column: 1 / -1;
}

Explanation

  1. Grid Container Setup
    The .grid-container is set up as a grid with four main areas defined by the grid-template-areas: a header spanning two columns, a sidebar on the left with the main area on the right, and a footer spanning both columns. The container uses a two-column layout where the sidebar takes one fraction (1fr) and the main area takes two fractions (2fr). A gap of 12px is applied between grid items.

  2. Defining Grid Areas
    The four areas: header, sidebar, main and footer are given their respective grid areas as defined in the container’s grid-template-areas. The specific area is given by using grid-area.

  3. Sidebar as a Nested Grid
    The .sidebar element is also a grid. It uses grid-auto-rows: 1fr to automatically set equal row heights for its items and a gap of 12px between them. The .sidebar-title has a special rule (grid-row: 1 / 3) so it spans the first two rows of the sidebar.

  4. Main Area as a Nested Grid
    The .main element is configured as a grid with four equal columns (repeat(4, 1fr)). This creates a layout where individual items are arranged in a four-column structure. The main title, .main-title, spans all four columns using the rule grid-column: 1 / -1.

Result:

UI Libraries and Packages for Creating Grid

CSS Grid isn’t just for hand-coding layouts. Many modern UI libraries and frameworks incorporate grid systems to help developers build responsive interfaces quickly.

Bootstrap

Bootstrap 5’s grid system, although historically based on Flexbox, is evolving to incorporate more CSS Grid concepts.

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

For more details, see the Bootstrap Grid Documentation.

Tailwind CSS

Tailwind CSS offers utility classes that simplify building grid layouts.

<div class="grid grid-cols-4 gap-4">
  <div>Item 1</div>
  <div class="col-span-2">Item 2</div>
  <div>Item 3</div>
</div>

Learn more from the Tailwind CSS Grid Documentation.

Material-UI (MUI)

Material-UI’s Grid component helps React developers create responsive layouts easily. One caveat, the Grid component implemented by MUI is not using CSS Grid, it uses CSS Flexbox. But, it works great and you can think it as a grid system with 12 columns.

import Grid from "@mui/material/Grid2";

function MyGrid() {
  return (
    <Grid container spacing={2}>
      <Grid size={3}>
        <div>Item 1</div>
      </Grid>
      <Grid size={6}>
        <div>Item 2</div>
      </Grid>
      <Grid size={3}>
        <div>Item 3</div>
      </Grid>
    </Grid>
  );
}

export default MyGrid;

Visit the Material-UI Grid Documentation for more information. Material-UI introduces a new Grid version 2 to replace the older version.

Exploring CSS Grid Generators

These CSS Grid generators are two of tools that allow you to play and construct grid, and also generate the CSS directly. Thanks to @KristjanRetter for developing these tools!

CSS Grid Generator

The CSS Grid Generator is a fantastic online tool that simplifies creating grid layouts. It features:

  • User-Friendly Interface: Adjust rows, columns, and gaps with a visual editor and see a live preview.

  • Instant Code Generation: Get the CSS code automatically generated as you design.

  • Learning Aid: Experiment with different settings and see the corresponding code to learn CSS Grid.

TailwindGen

For those who use Tailwind CSS, Tailwind Grid Generator is designed to generate grid layouts using Tailwind’s utility classes. It helps you build responsive designs without writing much custom CSS.

Final Thoughts

CSS Grid is great for web design, making it easier than ever to create clean, responsive layouts—from basic two-dimensional structures to more complex designs using grid areas and advanced techniques. Coupled with popular UI libraries like Bootstrap, Tailwind CSS, or Material-UI, you have a robust toolkit to build modern web interfaces. You can experiment and learn without writing codes with tools like CSS Grid Generator and Tailwind Grid Generator, Happy coding!

CSSCSS GridHTMLHTML5CSS3Frontend DevelopmentReactWeb Development