diff --git a/src/pages/blog/css-grid-vs-flexbox.md b/src/pages/blog/css-grid-vs-flexbox.md new file mode 100644 index 0000000000..6bdfc4a2c0 --- /dev/null +++ b/src/pages/blog/css-grid-vs-flexbox.md @@ -0,0 +1,230 @@ +--- +title: CSS Grid Vs. Flexbox +template: post +subtitle: similar layout models +date: 2022-08-16T12:27:53.918Z +image: https://blog.hubspot.com/hs-fs/hubfs/Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-1.png?width=466&name=Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-1.png +thumb_image: https://blog.hubspot.com/hs-fs/hubfs/Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-1.png?width=466&name=Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-1.png +image_position: right +author: src/data/authors/bgoonz.yaml +categories: + - src/data/categories/css.yaml +tags: + - src/data/tags/clean-code.yaml +show_author_bio: true +related_posts: + - src/pages/blog/adding-css-to-your-html.md +cmseditable: true +--- + + +## CSS Grid vs. Flexbox + +CSS Grid and Flexbox are layout models that share similarities and can even be used together. The main difference is that you can use CSS Grid to create two-dimensional layouts. In contrast, you can only use Flexbox to create one-dimensional layouts. That means you can place components along the X- and Y-axis in CSS Grid and only one axis in Flexbox. + +Let’s walk through each model below starting with CSS Grid. + +With CSS Grid, you can align components into columns and rows. This feature makes it ideal for larger layouts that must be divided into sections. In other words, this type of layout will have elements that need to overlap and layer rather than being linear. + +Below is a helpful illustration (by [developer Ayush Gupta](https://medium.com/@guptaji?hubs_post-cta=blognavcard-website)) of a possible layout with CSS Grid. + +![Two dimensional layout with CSS Grid illustration](https://blog.hubspot.com/hs-fs/hubfs/Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-1.png?width=466&name=Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-1.png) + +[Source](https://medium.com/youstart-labs/beginners-guide-to-choose-between-css-grid-and-flexbox-783005dd2412?hubs_post-cta=blognavcard-website) + +With Flexbox, you can lay out and align elements in a container even if you don’t know the size of those elements or if the size might change. That’s because a flex container is, well, flexible: it expands the flex elements to fill space when it’s available and shrinks them to prevent overflow when it’s not. + +Below is another helpful illustration by [developer Ayush Gupta](https://medium.com/@guptaji?hubs_post-cta=blognavcard-website) that shows a layout that’s possible with Flexbox. + +![One dimensional layout with Flexbox illustration](https://blog.hubspot.com/hs-fs/hubfs/Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-3.png?width=519&name=Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-3.png) + +[Source](https://medium.com/youstart-labs/beginners-guide-to-choose-between-css-grid-and-flexbox-783005dd2412?hubs_post-cta=blognavcard-website) + +In an [article on CSS Tricks](https://css-tricks.com/css-grid-replace-flexbox/?hubs_post-cta=blognavcard-website), co-founder of CodePen, Chris Coyier made an important note. Like Flexbox, you can use CSS Grid to create one-dimensional layouts. Also like CSS Grid, Flexbox can be used to create two-dimensional layouts. The difference here is that CSS Grid allows you to create 2D layouts in ways that Flexbox does not. + +With Flexbox, you can also create multi-line flex containers. You simply have to apply the flex-wrap property with a value of “wrap” to your container. That way, if your items are too large to all display in one line on a particular viewport, they will wrap onto another line rather than shrink to fit in one row. + +This creates rows and columns in a sense. But how wrapped flex items line up on a row is independent of how they lined up on the previous row. That’s because you can’t control where flex elements end up like you can in CSS Grid; flex elements simply inch along a single axis and then wrap accordingly. The layout will look more like bricks than a grid as a result. + +Here’s a side-by-side comparison of a layout built with Flexbox and one built with CSS Grid that shows this effect. + +![Flexbox vs CSS Grid layout comparison illustration ](https://blog.hubspot.com/hs-fs/hubfs/Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-4.png?width=389&name=Heres%20the%20Difference%20Between%20Flexbox,%20CSS%20Grid,%20%26%20Bootstrap-4.png) + +[Source](https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/?hubs_post-cta=blognavcard-website) + +Before we move on, it’s important to understand that these layout models are not mutually exclusive. You can combine them by using a Flexbox container inside a CSS Grid container. Note, however, that you cannot use a CSS Grid Container inside a Flexbox container. + +## Flexbox vs. Bootstrap + +It’s important to understand that Bootstrap 4’s grid system is built with Flexbox. What sets Bootstrap apart from using Flexbox alone is the process of writing code. With Bootstrap, you can create a grid using only [HTML](https://blog.hubspot.com/website/html?hubs_post-cta=blognavcard-website). With Flexbox, you must use HTML and CSS. Let’s take a closer look at each process below. + +Bootstrap offers a twelve-column system with five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. That means you can use its mobile-first flexbox grid to build unique and complex layouts without having to build them from scratch — it also means you need to understand its unique syntax. + +Let’s start with Bootstrap’s column system. Bootstrap has a twelve-column system, which means there can be up to twelve grid columns on a single horizontal block. You can have more than twelve, they’ll just start to wrap rather than show up on a single axis, regardless of the viewport. + +Most site owners won’t need anywhere close to twelve columns. In that case, you just need your columns to add up to twelve so they display on a single horizontal block. That means if I want to create two columns, in which one is half the size of the other, I’d use the classes **.col-4** and **.col-8**. + +Now let’s say I want to create equal-width columns that display horizontally until they reach a certain screen width and then automatically stack on top of each other. In that case, I’d need to use a responsive grid breakpoint. + +The five default responsive tiers of the Bootstrap 4 grid system are listed below. Please note that the value listed in pixels is the breakpoint at which columns will automatically stack on top of each other. + +| | | | +| ------------ | ------------------- | ------------------------------- | +| CLASS PREFIX | DEVICE SIZE | MAX CONTAINER WIDTH | +| .col- | extra small devices | less than 576px | +| .col-sm- | small devices | equal to or greater than 576px | +| .col-md- | medium devices | equal to or greater than 768px | +| .col-lg- | large devices | equal to or greater than 992px | +| .col-xl- | extra-large devices | equal to or greater than 1200px | + +Because the column system and responsive tiers work together, you’ll often see a number and a prefix defining the .col class. We’ll see that in the example below. + +### Bootstrap Grid Example + +Let’s say I want to create six equal-width columns that stack on top of each other on mobile phones or screens that are less than 576px wide. To do so, I’d use the **.col-sm-2** class. + +Applying this class to six **