DEV Community: Elly Loel

CSS Grid vs Flexbox: How to decide (with examples)

Elly Loel — Sun, 09 Oct 2022 13:00:12 +0000

Should you use a hammer or a screwdriver? Of course that would depend on the job!

The same is true when comparing CSS Grid vs Flexbox. No one layout mode is better than the other. It depends on the task at hand!

This post shows you examples of when to use CSS Grid and examples of when to use Flex before explaining the differences in detail so you can confidently reason about which tool to reach for no matter the scenario.

There is some overlap in what Grid and Flex can do, and that can be super confusing! By the end of this tutorial, you will understand the key differences and know how to pick the most suitable tool for your task.

Flexbox

The history of the flexible box layout module

The idea of flexbox was first discussed by the CSS Working Group sometime before 2008 and the first public draft was published in 2009. In their blog post “Flexbox is Dead, Long Live Flexbox!” Tab Atkins explains that “the original spec was too close of a direct translation from XUL”. XUL was Mozilla’s proprietary UI building language, it looks like an alternate universe version of HTML, which is why they were able to base the flexbox spec on it.

Due to the issues with the first working draft, Tab Atkins rewrote the spec and over the course of 2011 and 2012, publishing four working drafts.

Towards the end of 2012 the spec reached W3C candidate recommendation. This means the spec is stable, supported in browsers, tests are being written for it and there should not be a significant change from this version.

But, there was still performance and efficiency improvements to be made. So over 2014 and 2015 there were three more working drafts. Finally, the spec once again reached candidate recommendation in early 2016.

This is basically the flexbox we know and love today. The reason I covered this history in such detail is to help bring some context to the discussion surrounding layout in CSS. It wasn’t a easy or straight forward path to get to where we are today.

People had reservations around flexbox, because it changed multiple times people felt like they couldn’t use it, because they thought it might change again.

For the same reason people had reservations around grid when it first came out but the process for releasing the grid spec was much different to flexbox so it was needless worry.

Flexbox vs Grid publication history

CSS’s first layout mode intended for designing UIs

Flex layout ... is designed for laying out more complex applications and webpages.

— W3C Flexbox spec

I covered this history in detail to help bring some context to the discussion surrounding layout in CSS. The path to get here was long and windy. So windy, many developers were reluctant to adopt Flexbox in case it changed again. For this reason, it would be many years until Flexbox became commonplace. Around that time, Grid entered the scene and confused matters further.

Flex and Grid are not the only layout modes! There’s flow (aka the default layout mode), tables, floats, multi-column, and the list goes on. There are many different options, and it’s all about picking the best one for your use case.

Flexbox was what the web needed, but because it was the first tool of it’s kind, developers misunderstood and misused it from time to time. Many layout problems would be better solved with Grid but are hacked together with Flex instead.

The law of the instrument is a cognitive bias that involves an over-reliance on a familiar tool. This perfectly describes most web developers’ relationship with Flexbox 🤣.

If the only tool you have is a hammer, it is tempting to treat everything as if it were a nail

— A. Maslow

You might think there’s no need to learn Grid when you know Flex because they are basically the same.

Ehhh, no, not really. It’s important to remember that there will never be one layout mode to rule them all. They all exist for a reason.

When to use Flexbox?

In this section let’s look at some common uses for Flexbox:

Responsive navigation bar

An example of distributed navigation:

🔗 Play with the responsive navigation bar code

Split navigation

An example of split navigation:

🔗 Play with the split navigation bar code

Centring an element

An example of centring an element:

🔗 Play with the centring an element code

Card layout pushing footer down

An example of a card layout pushing footer down:

🔗 Play with the card layout code

Media objects

An example of media objects:

🔗 Play with the media objects code

Form controls

An example of form controls:

🔗 Play with the form controls code

CSS Grid

Does CSS Grid replace Flexbox?

No! Not at all, they both have their use cases, and they work wonderfully together!

Grid is often seen as the replacement of Flexbox or “Flex 2.0” when it’s really another tool for us to utilise.

Web browser developers wrote the specifications for Flex and Grid around the same time, but their journeys from spec to implementation were very different.

Grid makes so many layouts that used to be near impossible a lot simpler.

When to use CSS Grid?

In this section let’s look at some common uses for CSS Grid:

Overlapping elements

Grid gives you great control over element placement, including layering elements on top of each other.

🔗 Play with the overlapping elements code

Subgrid (coming soon)

Subgrid is only supported in Gecko (Firefox) and WebKit (Safari), currently in development for Blink/Chromium (Chrome/Edge/Opera/Samsung/etc.):

The contents of the cards are able to be aligned thanks to subgrid.

Masonry layout (coming not so soon)

Masonry layout only supported in Gecko (Firefox) behind a flag.

We’re focusing on the layout, right? Totally not the cats…

How to choose CSS Grid or Flexbox?

Now you’ve seen some examples I hope you’ll have a better idea about which tool to reach for and when. Still, it’s not always obvious which tool to reach for when you’re building a custom UI so let’s look at some of the ways you can think about when to use Grid and when to use Flexbox.

One-dimensional versus two-dimensional layout

Flexbox lays out it’s elements in either a row or a column, not both. You can fake it, and get something that looks like a Grid with Flexbox but the Flexbox algorithm doesn’t know about the second dimension.

Grid positions its elements based on both it’s rows and columns.

Content first (intrinsic) or layout first (extrinsic)?

Use Grid when you already have the layout structure in mind, and Flexbox when you aren’t as worried about the layout and just want everything to fit.

Flexbox will listen to it’s content, so it’s content first (intrinsic).

Intended layout.

Doesn’t look like it’s changed (it has).

Woah, what the?!

Oh boy, what in the world is going on?!?

Grid will stick to it’s rows and columns no matter what, so it’s layout first or extrinsic.

Intended layout.

Doesn’t look like it’s changed (it has).

Never changing these columns.

Uh oh, we’ve got some overflow.

If you want you can even make the layout so rigid that it stays exactly the same, though you probably don’t actually want this.

A very very long what?

Layout mode cheat sheet

A CSS layout mode, sometimes called layout, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:

Download and print the layout mode cheat sheet here

Layout mode cheat sheet

Flexbox	The children of a flex container can be laid out in a column or a row and will automatically flex their size, either growing to fill unused space or shrinking to avoid overflowing the parent. Horizontal and vertical alignment can easily be set, making Flexbox ideal for distributed nav/header, split nav/header, centring an element, card layout pushing footer down, media objects, and form controls.
Grid	The children of a grid container are laid out in rows and columns that can be easily defined. This is best when you have a structured layout in mind, for example responsive 1-3 column holy grail layout, RAM (Repeat, Auto, Minmax), different sized grid items, overlapping elements, subgrid (soon!), and masonry layout (not so soon).
Multi column	The children of a multi column container are laid out in columns. You are able to set the number of columns and/or the width of columns, as well as how content should flow between columns, the size of columns gaps, and lines in the gaps. This is best when you have lots of text that you want to break into multiple columns.
Table	Table layout may seem similar to grid layout but table layout comes with semantics. This is best when you have a structured set of data made up of rows and columns (tabular data). If you have tabular data is is important you use a table and not grid, as the semantics tables have helps screen readers and other assistive technology describe it better.
Flow	Flow layout is the default layout mode for most elements. It’s best for laying out document like content, because of how it handles inline and block elements differently.
Float	Floats are best for placing media within text. The text is able to wrap around floated elements, like images in a newspaper article for example.
Positioned	There are multiple different types of positioned layout. An element can be positioned relative to itself, it’s containing block, or the viewport. This can be used, for example, to position the header to always be at the top of the viewport, to position a chat window in the corner of the viewport, or to position a tooltip next to a button.

⚠️ Warning
Developers used to push table and float to the limit to layout pages. This is now considered a bad practice, as you should use the best layout mode for the job, reserving table and float for what they were originally designed to do.

The verdict

Layout is the bedrock of CSS. Different layout modes are useful in different circumstances. There’s no silver bullet answer to the question of which one you should use.

The most important thing is to know is that they all have their use cases. Take your time to learn about them all, so that you can use the right tool for each situation.

And remember, it’s okay if you can’t remember all this right away. This article isn’t going anywhere, so feel free to come back and use this as a reference when you’re trying to make this tricky decision. We’re here to help!

There is an overwhelming amount of resources available online for learning more about layout. If you’re interested in learning more check out Scrimba’s Learn Flexbox for free or Learn CSS Grid for free courses, or check out How not to struggle with CSS, with Kevin Powell on the Scrimba Podcast. And lastly, if you’re looking for something more comprehensive checkout Kevin Powell’s awesome Learn Responsive Web Design course on Scrimba.

I Dropped Out of My Computer Science Degree to Learn Coding

Elly Loel — Sun, 19 Jun 2022 12:41:47 +0000

Well hello there! My name is Elly Loel. I'm a developer, designer and writer, currently working as a junior developer at Portable!

Lulu trying her very best to distract me.

I run a newsletter and love sharing interesting things to help people become better coders! In my spare time, I love building mechanical keyboards, watching cartoons and anime, and hanging out with my partner Brodie and our cat Lulu. 🐈‍⬛

You might have heard me on the Scrimba podcast with Alex Booker or seen me in Portable’s How to land your first tech job event.

How I landed my first tech job

I always knew I wanted to work with computers for a career, but I never specifically knew how that would happen until I took a game development course in year 10. In this course, I built a game and made a website to advertise the game. After spending far too much time on my game's website, I knew what I wanted to do, I knew I wanted to be a web developer. There was one issue, I was about to undertake the final two years of high school which would make or break my chances of getting the score I needed to get into university. But the most annoying part was that my school didn’t offer tech subjects. My ADHD brain didn’t give a shit about subjects I wasn’t interested in. Despite my scores, I managed to make it into university, and that is where my love of web development really blossomed.

Just as the pandemic spread around the world and the first Melbourne lockdown was enforced in March 2020, I started a degree in Computer Science at Swinburne University of Technology. During the first half of my course, I fell in love with web development but then realised that I wouldn’t be able to pursue it in this course. Unfortunately, I had completed all of the web development classes, leaving me with a difficult choice: stay and finish the degree or take a leap and learn web development on my own. Obviously, I left and took the self-taught route, mainly with the help of Scrimba. I eventually completed The Frontend Developer Career Path. This helped me learn most of what I needed to know to land a job as a web developer. I also focused a lot of effort into building my personal portfolio website to demonstrate my knowledge and skills.

An early design of my portfolio website

When it came to the job hunt I really won the lottery, I only applied to two tech jobs before I landed my role at Portable. With hindsight, I realise how lucky I was to find a recruiter, on LinkedIn, who was looking for new people to help. The support that I got from the recruiter to find roles that were the right fit for me was invaluable. I would have never discovered Portable if it wasn’t for him. Finding that right fit job is the first step, then really going for it is the best way to secure a job. The ‘shotgun method’ of applying, where you send of as many applications as you can, means that you’re likely going to end up at some random company that you don’t know, doing work that you don’t care about, while you could be at an awesome company where you fit in, doing work that you love!

Your motivation to start coding

I’ve always loved computers, I grew up playing video games like Counter Strike and tinkering with my computer to customise it to my exact liking. The first real step I took towards starting coding was taking that game development course, during year 10. I thought that because I loved playing games I’d love making them too, but I was very wrong about that.

As I mentioned, we had to create a little website to showcase our game, this side task ended up being what I spent most of my time on throughout the course. We were only required to learn the basics of HTML and CSS but I delved into it and spent all my time trying to make my website look amazing.

The realisation that I could make a website about anything and share it online with my friends and family was completely mind blowing to me.

At the time, I was into graphic and motion design, which really flowed through into my love of CSS. Instead of just creating things for people to look at, I could now create experiences for people to interact with.

After the course finished I was left with the desire to code and create websites but I couldn’t due to high school, and as I mentioned, university didn’t really fulfil that desire either. So I had lots of motivation but no way to use it. Which is what led me to trying to find resources online so I could continue learning.

My desk setup is the perfect showcase and explanation of my love of design and art.

How you picked a resource

Considering my ADHD I knew video tutorials were going to be more effective, so as I was trying to build things I would search for help on YouTube. Through that I found Kevin Powell’s CSS tutorials, which really helped me fall in love with, and gain a greater understanding of, the language.

I was also learning more about the web development landscape from channels like Fireship and Brad Traversy. They helped me decide on what languages and frameworks to learn as I was getting more advanced. Which is what led me to discovering Bob Ziroll’s free React course (there is a newer version now) on the Free Code Camp YouTube channel. From there I looked into the Scrimba platform and discovered how much better it was for reinforcing your learning. With that in mind when I was looking at investing in a paid course to help get me job ready it was an obvious choice to go for the Frontend Developer Career Path.

Since finishing the career path and landing my first tech job I’ve been focusing on specialising in advanced CSS and design systems. I’ve been following Josh W. Comeau’s amazing articles and his course, CSS for JS devs. As well as, the CSS podcast by Adam Argyle and Una Kravets.

How you structured your learning

When it came to structuring my learning I kinda had the perfect storm:

I was on break between semesters at university, so I had nothing on my plate.
I had a clear goal, to land a job before next semester's census date (the final date you could withdraw from classes without incurring fees).
I had a hard deadline set for when I needed to land the job, August 31st 2021.
I had ADHD hyperfocus (sort of) working in my favour.
I was in a COVID lockdown, so I had nothing better to do.

So for roughly 2 to 3 months I worked nearly non-stop to achieve my goal, though as perfect or amazing as this may sound it also had its downsides. I worked so hard that I burnt myself out quite severely. Once I knew I got the job I had about a month before I started, in that time I completely crashed and barely did anything.

What I'm trying to say is that you probably shouldn't do what I did, or what anyone else does for that matter. We're each different in who we are and what our circumstances are, some of us might be able to focus just on learning to code while others might be working a job, still in school, being a primary or sole carer, or all manner of other things. So don't be hard on yourself for not being able to follow a structure laid out by someone who isn't you.

Take the time to think about what is going to work best for you in terms of time and energy. And also consider how you learn best, maybe to make things stick you need to go over the lessons twice or maybe you're someone who loves taking notes, just make sure you do whatever works for you.

Commission by Nervous Ghost

What made coding concepts “stick” for you

If I'm honest, I don't know if I've really had a whole lot of concepts stick for myself. I'm not someone who's spent hours upon hours learning data structures and algorithms or how to invert a binary tree. Because honestly, I don't think I could do that.

For me it was more of getting to a point where I felt like I had enough of an idea to be able to G̶o̶o̶g̶l̶e̶ DuckDuckGo solutions to my problems and figure it out on the fly. Then through lots and lots of repetition I slowly started to remember things.
I think it's less about making sure all the coding concepts stick and more about getting to the point where you're able to start creating things. The more you create the more you'll learn by doing.

Once you have a base of practical knowledge from building things then you might want to look into specific concepts. Having a practical understanding is extremely important to learning theoretical concepts and being able to translate them into what you're building.

How you knew you felt “ready” to start applying

I didn't, I really didn't feel ready to start applying at all. I forced myself to get in contact with a recruiter to start applying. I remember one day I was on LinkedIn and I saw a post from a recruiter that said they had spaces open and they were looking for new people to help out. And even though I most definitely didn't feel ready, I knew that an opportunity like this likely wasn't going to come around again anytime soon. So I replied to the post saying that I'd love to work together.

I'm so glad I did it because I wouldn't have my job if it wasn't for the recruiter. I would still be stuck at university going through my course.

The post that lead me to getting in contact with the recruiter

How you went about applying to new jobs

So as I mentioned I didn't do the usual way of applying to jobs, I worked with a recruiter who was able to direct me to jobs. When I first got in contact with him we had a chat and he got to know me and what I was looking for so he could figure out what jobs would best fit me.

Having that help from someone who had lots of connections in the industry and was able to find the best fit for me was vital to me landing my job.

I would definitely recommend for anyone who is about to or is currently applying to jobs to reach out to a recruiter. Even if you don't think you're ready, get in contact with a recruiter and see if they can help you find some roles that would fit you in terms of who you are and what you're looking for.

Part of the conversation I had with the recruiter

The interview process and how it made you feel

The interview process for my current role was a very long one. I remember it was something like two months long, and there were about six different interviews. Don't get me wrong though, it was really good, just very long.

I remember I was really anxious so I kept emailing them, double and triple checking what was happening and when the next interviews were. Also, seeing as all the people that I was meeting with were very busy, whenever I got calendar sharing links the closest open times were a week or more in the future. So I would just be hanging out waiting and working on the Frontend Developer Career Path, twiddling my thumbs and getting really anxious looking forward to these interviews.

Step by step the interview process was:

Initial interview
- Get to know me, what I'm about and why I'm applying to the company.
Technical chat
- No coding, just a chat to gauge my knowledge. I remember one of the questions the interviewer asked was about responsive design and what you might add on a smaller screen rather than take away? I answered saying that you might add a navigation menu button on a smaller screen but not on a bigger screen.
Work sample solo coding
- Spend one hour adding features to a partially functioning project.
Work sample pair coding
- Spend another hour with one of the developers adding another feature to the project.
Psychometric assessment
- A look at your preferred ways of working.
Salary chat
- Talk about salary expectations.
Senior Leadership interview
- I got to chat and ask lots of questions to the CEO and the head of the tech team.
Reference check
- They contacted and chatted to my reference.
Offer 🎉

What you know now that you wished back then

I wish I knew that I didn't need to go to university. That would have saved me about $10,000 in debt 🥲. I wish I knew that you didn't need a degree to be a web developer, it's not like we're doctors or lawyers where you need to have the degree. I really wish I knew that being self taught was a completely acceptable way to get into this industry.

I also wish I knew how important building projects to showcase your abilities and knowledge is. I did build a few projects while completing the Frontend Developer Career Path but I wish I had built more personal projects, as people always say, build projects that fill your own needs.

The final thing I wish I had done was written more and shared more as I was going through the journey of learning web development and applying to jobs. As they always say, the best time to plant a tree was 20 years ago and the second best time is now. So I'm glad I've started doing it now, better late than never.

React Movie Search project from the Frontend Developer Career Path

Your greatest challenges and how you overcame them

I think one of the biggest challenges for me was the imposter syndrome around applying to jobs. If I'm honest I left it way too late, I should have forced myself to start applying much earlier, even though I didn't feel as though I was ready.

The most important thing to keep in mind is that you're never going to feel ready, there will never be that perfect moment when you are finally like "Yes! I've learned everything, I'm ready!" You're always learning, whether you're a junior or the head developer, so you may as well start applying and if you manage to get something then that's awesome!

The other huge challenge for me was taking the leap of faith to leave university and focus on learning web development and getting myself ready to apply for jobs. I had no idea whether it was going to work out or not. I was very concerned that it might not, as the census date was approaching fast while I was in the final stages of the interview process. I didn't know if I was going to get the job and leave university or if I was going to not get it and have to go back to university and be weeks behind on my classes.

So that was a really huge challenge and a big leap of faith that I took, but I'm very grateful I did.

Commission by Nervous Ghost

DEV Community: Elly Loel

CSS Grid vs Flexbox: How to decide (with examples)

Flexbox

The history of the flexible box layout module

CSS’s first layout mode intended for designing UIs

When to use Flexbox?

Responsive navigation bar

Split navigation

Centring an element

Card layout pushing footer down

Media objects

Form controls

CSS Grid

Does CSS Grid replace Flexbox?

When to use CSS Grid?

Responsive 1-3 column holy grail layout

RAM (Repeat, Auto, Minmax)

Different sized grid items

Overlapping elements

Subgrid (coming soon)

Masonry layout (coming not so soon)

How to choose CSS Grid or Flexbox?

One-dimensional versus two-dimensional layout

Content first (intrinsic) or layout first (extrinsic)?

Flexbox will listen to it’s content, so it’s content first (intrinsic).

Grid will stick to it’s rows and columns no matter what, so it’s layout first or extrinsic.

Layout mode cheat sheet

The verdict

I Dropped Out of My Computer Science Degree to Learn Coding

How I landed my first tech job

Your motivation to start coding

How you picked a resource

How you structured your learning

What made coding concepts “stick” for you

How you knew you felt “ready” to start applying

How you went about applying to new jobs

The interview process and how it made you feel

What you know now that you wished back then

Your greatest challenges and how you overcame them