A Simple Beginners Guide To Flexbox And CSS Grid [Article]

Welcome back to another web design tutorial. In this post, we’ll take a look at two layout systems used in CSS: Flexbox and CSS Grid. We’ll also look at how combining both can help you achieve your project design goals.

Flexbox and CSS Grid are two powerful layout systems in CSS that offer different approaches to creating flexible and responsive web layouts, whether you are writing website code from scratch or using a page builder for WordPress such as Bricks or Oxygen Builder.

Here’s an overview of each system:

Flexbox

Flexbox, short for Flexible Box Layout, is developed for building one-dimensional layouts, typically along a single axis—either horizontally or vertically. It is ideal for arranging items within a container, distributing space, and aligning content.

Let’s take a look at the key features of Flexbox:

1. One-dimensional layout: Flexbox focuses on arranging items in a row or column.
2. Flex container and flex items: The parent container becomes a flex container by applying, display: flex and the child items become flex items.
3. Main and cross axes: Flexbox has a main axis (horizontal or vertical) and a cross axis perpendicular to it.
4. Flexible sizing: Flex items can grow or shrink to fit available space using properties like flex-grow, flex-shrink, and flex-basis.
5. Alignment and justification: Flexbox provides properties like justify-content and align-items to control item alignment along the main and cross axes.

OK, so hopefully this will give you a good base insight into Flexbox. Next, we’ll take a look at CSS Grid.

CSS Grid

CSS Grid Layout, often referred to as CSS Grid, is a two-dimensional layout system that allows you to create complex grid-based layouts. It offers precise control over rows, columns, and their placement, enabling flexible and responsive designs.

The key features of CSS Grid include:

1. Two-dimensional layout: CSS Grid creates a grid of rows and columns, allowing elements to be positioned anywhere in the grid.
2. Grid container and grid items: The parent container becomes a grid container by applying display: grid, and the child items become grid items.
3. Explicit grid definition: Grid layout allows you to define the number of rows and columns, their sizes, and their alignment using properties like grid-template-rows, grid-template-columns, and grid-gap.
4. Grid tracks and cells: Grid tracks are the rows or columns in the grid, and cells are the spaces between them where grid items are placed.
5. Responsive design: CSS Grid supports responsive layouts by allowing you to define different grid structures for different screen sizes using media queries.

When to use Flexbox or CSS Grid

Here’s the thing to remember –

• Flexbox is great for simpler one-dimensional layouts, such as navigation menus, flexible content containers, or vertically centering items.
• CSS Grid is well-suited for more complex, two-dimensional layouts, like full-page grids, card-based layouts, or designs with explicit control over rows and columns.

In practice, you can also combine Flexbox and CSS Grid, using Flexbox to control the layout within grid items or using Grid to create flexible sections within a Flexbox container.

Using Flexbox and CSS grid inside page builders

In Oxygen, you can navigate the options available for the container elements by going to the element itself > Advanced > Layout.

In Bricks, you can navigate the options available for the container elements by going to either the Content or Style tabs.

In both my Bricks Builder Mastery Course and Oxygen Builder Course, I explain in greater detail how to combine the Flexbox model with CSS grid in the design projects. Both of these courses are available individually or part of my yearly membership at Van Marciano Pro.

Summary

Both Flexbox and CSS Grid are powerful tools, and choosing one or combining them depends on the specific layout requirements and design goals of your project.

Hopefully, you found this short little post useful. Whether you are learning to design websites using Bootstrap or a website builders, understanding the basic fundamentals of layouts is important.