Skip to main content
Post image
ยท 8 min read

CSS Grid vs Flexbox - A brief guide

Introductionโ€‹

Flexbox helps in creating one-dimensional layouts through space distribution and alignment capabilities. Flexbox makes it easier to design responsive layouts without using float or positioning. It has made life much easier for people that use CSS.

Grid is a two-dimensional layout model that helps in creating a layout and aligning items in it. It offers a layout system with rows and columns, making it easier to design web pages without using floats and positioning.

Creating layouts with CSS can be tricky, and it's complicated by the fact that both flexbox and grid are used for designing the page layouts. This guide includes the some differences between flexbox and grid. We'll see how to decide which one of these to use while designing a layout.

In this guide, we'll cover:

Prerequisitesโ€‹

  • Fundamentals of CSS layout
  • Basic understanding of CSS flexbox
  • Basic understanding of CSS grid

Control of Child Elementsโ€‹

Flexbox gives children a lot of control. You have three child elements in the following example.

If you set display: flex, it creates a flex layout. You'll notice that you don't have three equal columns. It comes as a default with flexbox when things are calculated for sizing.

<div class="parent">
<div class="child">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit.</p>
</div>
<div class="child">
<h3>Lorem ipsum</h3>
<p>Aestiae voluptatum expedita minima doloribus nemo ipsa vel. Ducimus nam, vel rerum quisquam illum maxime cumque.</p>
</div>
<div class="child">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae molestiae voluptatum expedita minima doloribus nemo ipsa vel. Ducimus nam, </p>
</div>
</div>
.parent {
display: flex;
width: 100%;
max-width: 50rem;
margin: 0 auto;
padding: 1rem;
border: 3px solid lime;
}

.child {
padding: 1rem;
border: 3px dashed red;
background: white;
}
Control of Child Elements

If you want to make three equal columns, you can't do this in a parent element. You need to do this in the child element as width:100% or flex:1. It will create three equal child elements in width.

Basically, child elements have control because the parent element delegates it to child elements in a flexbox. If child elements have equal content, they will be equal in size without doing width:100% or flex:1.

So, we need to be careful while using flexbox.

Control of Child Elements


Unlike flexbox, a parent is completely in control of a grid. Let's create the above layout using a grid:

.parent {
display: grid;
width: 100%;
max-width: 50rem;
margin: 0 auto;
padding: 1rem;
border: 3px solid lime;
}
Control of Child Elements

Nothing will happen if we change display: flex to display: grid You have to do something else to actually get things in the right place.

So, add this line grid-template-columns: 1fr 1fr 1fr in parent element. Then, the content will fit into those columns that are created. When you create a grid, children of the grid fit into those cells.

Control of Child Elements


github support banner

Intrinsic and Extrinsic Sizingโ€‹

In CSS, you have intrinsic and extrinsic sizing, like:

.intrinsic-size {
width: auto;
}
.extrinsic-size {
width: 500px;
}

It's a really important part of how layouts work in CSS. In intrinsic sizing, the browser figures out the size of an element.

In extrinsic sizing, you declare a specific width. Flexbox relies heavily on the intrinsic sizing of elements while growing and shrinking.

<div class="product">
<img src="https://assets.codepen.io/308367/betteroutreach-logo.avif">
<div class="product__info">
<h2>Product One</h2>
<p>A collection of the best cold email templates ever sent</p>
<div class="product__meta">
<div>Free Options</div>
<div>Email</div>
</div>
</div>
</div>

<div class="product">
<img src="https://assets.codepen.io/308367/sliderule-logo.avif">
<div class="product__info">
<h2>Product two</h2>
<p>The no-code rules engine for risk & fraud</p>
<div class="product__meta">
<div>Free</div>
<div>Social Network</div>
</div>
</div>
</div>

<div class="product">
<img src="https://assets.codepen.io/308367/warmy-logo.avif">
<div class="product__info">
<h2>Product three</h2>
<p>Auto all-in-one tool to make your email channel reliable</p>
<div class="product__meta">
<div>Free Options</div>
<div>Email</div>
</div>
</div>
</div>
.product__meta {
font-size: 12px;
outline: 3px solid red;
display: flex;
gap: 1rem;
}

.product__meta > * {
border: 3px solid lime;
}

body {
display: grid;
padding: var(--size-9);
align-content: start;
gap: var(--size-9);
background: white;
}

.product {
display: grid;
gap: var(--size-5);
grid-template-columns: 5rem 1fr;
}

.product__info {
display: grid;
grid-template-rows: min-content;
}

Flexbox figures out content size in the first place. When you do display:flex, element size is based completely on the size of content.

If you display flex in the product meta, two columns will take width according to the content size. It will help in creating the desired layout. So, dynamic columns can fit into this layout.

Control of Child Elements


Unlike grid, where each column will take full width, or you need to specify the size in the parent element.

.product__meta {
font-size: 12px;
outline: 3px solid red;
display: grid;
gap: 1rem;
}
Control of Child Elements

Hence, flexbox will provide more flexibility in this case. Grid helps in creating a more controlled layout.

Box Alignmentโ€‹

Let's not forget about box alignment. Because flexbox holds the ability to align elements very easily. Before flexbox, it was very difficult to align items properly. Different hacks and tricks were used to align elements in the desired layout.

Flexbox can be used in a grid layout as well. Whenever you need to create a layout that has specific alignment or space distribution, you might want to go for a flexbox.

Behavior of Flexbox and Gridโ€‹

Grid is useful in creating more complex and organized layouts. When you design the layout of a page, you can use a grid for the combined layout. Whereas flexbox helps in creating individual elements.

Since flexbox is based on intrinsic sizing, you can use flexbox when the layout depends upon the content. On the other hand, the grid is useful when content depends upon the layout.

Use casesโ€‹

Flexbox can be a great to help align content and move blocks around and great option for app components and small-scale layouts, while grid can be more appropriate when you have large areas layouts.

Flex directions allows you to vertically or horizontally align your content, which is useful when developing reverse rows or columns.

Use flexbox:

  • If you have items in a single dimension either in a row or a column.
  • If content shapes the layout, it takes a content-first approach.
  • If you want to keep container items independent of each other.

Use grid:

  • When the items need to go into rows and columns.
  • When layout shapes the content, it takes a layout-first approach.
  • When you want to design the combined layout of the page.

Browser Supportโ€‹

grid

flex

Conclusionโ€‹

Grids can be your best friend when you need to create the outer layout of a webpage. With these, complex designs are not out-of reach and responsive too!

To summarise, when you should use flexbox and when you should use the grid. Although you can design any layout with both flexbox and grid, you need to follow a path of least resistance.


discord banner

Build your React-based CRUD applications without constraintsโ€‹

Building CRUD applications involves many repetitive task consuming your precious development time. If you are starting from scratch, you also have to implement custom solutions for critical parts of your application like authentication, authorization, state management and networking.

Check out refine, if you are interested in a headless framework with robust architecture and full of industry best practices for your next CRUD project.

refine blog logo

refine is an open-source React-based framework for building CRUD applications without constraints. It can speed up your development time up to 3X without compromising freedom on styling, customization and project workflow.

refine is headless by design and it connects 30+ backend services out-of-the-box including custom REST and GraphQL APIโ€™s.

Visit refine GitHub repository for more information, demos, tutorials, and example projects.



Related Articles

Software Developer
Material UI Grid System in React
ยท 14 min read
Software Developer
Framer Motion examples for React animations
ยท 10 min read
Web Developer
Neumorphism with CSS - A new design trend
ยท 9 min read

From Same Author

Software Engineer
Temporal API - A new approach to managing Date and Time in JS
ยท 8 min read