Beginner’s Guide To CSS Grid And Flexbox

An overview and comparison between CSS Grid and Flexbox layout techniques in CSS.

Ayush Gupta
Jun 15, 2018 · 5 min read

Flexbox Fundamentals

The Flexbox (Flexible Box) Layout model emphasize at presenting a more methodological way to lay out, align and allocate space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

“The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).”

Chris Coyier

Image for post
Image for post
One-dimensional approach of Flexbox. (Source)

CSS Grid Fundamentals

CSS Grid Layout is a CSS layout method developed for the two-dimensional layout of items on a webpage or an application, meaning it can manage both columns and rows.

CSS Grid outshines at dividing a page into several sections or defining the correlation in terms of size, position, and layer.

Like tables, grid layout allows us to align components into columns and rows. However, numerous layouts are either achievable or easier with CSS grid than they were with tables. For example, a grid container’s children could place themselves so they truly overlap and layer, alike CSS positioned elements.

Image for post
Image for post
Two-dimensional approach of CSS Grid. (Source)

CSS Grid vs Flexbox

  1. CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).
  2. A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.
    If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.
  3. Flexbox layout is most appropriate to the components of an application (as most of them are fundamentally linear), and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.
  4. If you only need to define a layout as a row or a column, then you probably need flexbox. If you want to define a grid and fit content into it in two dimensions — you need the grid.
Image for post
Image for post
Flexbox Container inside a Grid Container

Browser Support & Bugs

Most modern web browsers now support both CSS Grid and Flexbox. The images below show detailed analysis of browser support for Grid & Flexbox.

Image for post
Image for post
CSS Flexbox Browser Support. (Source: caniuse.com)
Image for post
Image for post
CSS Grid Layout Browser Support. (Source: caniuse.com)

Youstart Labs

Youstart Labs enables organizations and students to learn…

Ayush Gupta

Written by

Web Geek and Developer, Blogger, Amateur Photographer and an IT Engineer | React Native Dev at FirstCry | ayushgupta.tech

Youstart Labs

Youstart Labs enables organizations and students to learn emerging technologies in which they can make a career.

Ayush Gupta

Written by

Web Geek and Developer, Blogger, Amateur Photographer and an IT Engineer | React Native Dev at FirstCry | ayushgupta.tech

Youstart Labs

Youstart Labs enables organizations and students to learn emerging technologies in which they can make a career.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store