How to Use CSS Grid in GenerateBlocks

Since GenerateBlocks was introduced, the grid block has been the default way to create multi-column layouts inside the builder. When Flexbox was added, it provided another option for creating layouts, but I’ve always found using Flexbox for multi-column layouts to be a bit cumbersome.

With the introduction of CSS Grid in GenerateBlocks, I believe this marks the end of the grid block. CSS Grid offers a cleaner, more flexible way to create layouts without cluttering your DOM with extra elements. In this post, I’ll show you how to start using CSS Grid in GenerateBlocks and explain why it’s such a powerful tool for layout design.

Why CSS Grid Is Worth Learning

If you’ve just wrapped your head around Flexbox, CSS Grid might feel a bit overwhelming at first. However, if you were starting from scratch without prior knowledge of either, CSS Grid is arguably simpler to use.

This post will cover the basics of CSS Grid to help you get started. Once you understand the fundamentals, you’ll see how it can simplify your workflow and unlock new possibilities for layout design.

Setting Up a CSS Grid

Step 1: Add a Container

Start by adding a container to your page. Inside that container, add an inner container.

To give yourself some working space, apply a class to the outer container (e.g., section-padding) and add padding to the section.

Step 2: Create the Grid

Instead of adding a grid block, we’ll use the inner container to set up the grid.

1. Add a class to the inner container (e.g., demo-grid).
2. Under Layout, change the display property to grid.

This gives you access to the Grid Template Columns and Grid Template Rows options.

Using Presets for Grid Layouts

GenerateBlocks includes helpful presets for common grid layouts.

1. Click Choose a Preset under Grid Template Columns.
2. Select a three-column layout.

This automatically fills in the instructions to create a simple three-column grid.

Adding Content

To populate the grid:

1. Add three containers inside the inner container.
2. Style the containers at the block level to make them visible (e.g., add a blue background and set a minimum height of 200px).

Understanding Grid Template Columns

When you select the three-column preset, GenerateBlocks uses the following CSS:

css

repeat(3, 1fr)

• repeat(3, 1fr): This creates three columns, each taking up one fractional unit of the available space.
• fr (fractional unit): A key unit in CSS Grid that distributes space proportionally.

Implicit Rows

One of the advantages of CSS Grid is that it automatically creates implicit rows.

If you duplicate the containers inside the grid, CSS Grid will continue adding rows as needed, even though you didn’t explicitly define them.

Adding Gaps

To add spacing between the columns and rows:

1. Set the Column Gap and Row Gap (e.g., 20px each).

This makes the grid cells more visually distinct.

Creating Responsive Grids

One of the most powerful features of CSS Grid is its ability to create responsive layouts without additional breakpoints.

Using auto-fit and minmax

Here’s a setup I use frequently:

css

repeat(auto-fit, minmax(250px, 1fr))

• auto-fit: Automatically fits as many columns as possible within the available space.
• minmax(250px, 1fr): Ensures each column is at least 250px wide but can grow to take up a fractional unit of the space.

This setup creates a grid that automatically adjusts based on the container width.

Testing Responsiveness

When you switch to tablet view, the grid automatically adjusts from four columns to two columns. On mobile, it stacks into a single column.

You don’t need to manually set breakpoints—CSS Grid handles the responsiveness for you.

Customizing Column Sizes

You can adjust the minimum column width to optimize your design.

For example:

• At 250px, you might get four columns.
• At 350px, you might get three columns.

This allows you to fine-tune the layout based on your design needs.

Spanning Columns and Rows

CSS Grid also allows you to make elements span multiple columns or rows.

Example: Spanning Columns

1. Select a container inside the grid.
2. Add a class (e.g., demo-grid-first-child).
3. Under Layout, set the Grid Column property to 1 / 3.

This makes the container span from the first column to the third column.

You can also span the entire width by setting 1 / 4.

Why CSS Grid Is Better

While Flexbox is great for many layouts, CSS Grid excels in scenarios where you need precise control over rows and columns.

With CSS Grid, you can:

• Create layouts that automatically adjust to the container size.
• Define explicit or implicit rows and columns.
• Span elements across multiple rows or columns.

Final Thoughts

CSS Grid is a powerful tool that simplifies layout design and offers capabilities that Flexbox can’t match.

If you’re new to CSS Grid, start by using the presets in GenerateBlocks. As you become more comfortable, you can experiment with custom setups like auto-fit and minmax to create responsive layouts.

I encourage you to explore CSS Grid further and incorporate it into your workflow. It’s a game-changer for building flexible, responsive designs directly in the editor.