For some people with many years on web development, float positioning was a default option for creating a CSS Layout. But nowadays, web developers have more options and fewer bugs with Flexbox or CSS Grid.
Creating CSS Layouts with Flexbox and CSS Grids is super easy. However, the learning curve could be the first blocker for many web developers. So, many of them still trust the unreliable floats, the unflexible positioned elements, or the complex Bootstrap.
A brief layout’s story
Websites have changed a lot in the last decades. They started as static pages without any format. Now, you can find an utterly interactive webpage with a lot of users creating content at the same time.
Websites have advanced because web-development has done. In the early years, Web-developers figured out how to create layouts using tables; a practice punished nowadays by search-engines and semantic web advocates.
Float and position properties became a better solution for CSS Layouts for a while. Float property started like a valuable way to give webpages a magazine look-a-like feeling. So, developers can arrange an image and let the text flow around it, or they can create boxes with particular box info aside from the main article.
After a while, web-developers realized that they also could use float property for building more dynamic and responsive layouts. However, developing CSS layouts wasn’t the first aim of the float property. So, sometimes it can be a real headache when trying to design a responsive site, or it couldn’t be the most elegant solution when you need to specify to clear in each element after a float.
In recent years, two new CSS modules have arrived to revolutionize the way that we create CSS Layouts: Flexbox and CSS Grid. These CSS techniques allow web-developers to build more complex and responsive design layouts that work in many browsers.
Know the Grid
Since October 2017, all major browsers -Chrome, Firefox, Safari, and Edge- offer support on CSS Grid Layout without vendors prefixes. Now, web-developers have a powerful two-dimension tool for developing CSS layouts in less time and with fewer problems.
For some people, Grid offers “the most powerful layout system available in CSS.” Like a two-dimensional system, developers can set columns and rows up.
How easy is using a Grid Layout in CSS? It’s incredibly easy. The first step is creating a Grid container element. It could be a “main” or “aside” element, or a div with a particular class. For example:
.my-first-grid {
display: grid;Then, specify how many columns and rows will the Grid have:
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 20px);The last lines mean four columns of the same proportion and four rows of 20 pixels each one. So, your code will look like this:
.my-first-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 20px);
}Then, place the child elements of the grid-column and grid-row:
.my-first-child-element {
grid-column: 1/2;
grid-row: 2/3;
}That means “place these class on the first column and the second row.”
You can find more detailed documentation about Grid in A complete guide to Grid or play this game meanwhile mastering the basic concepts.
Think inside the Flexbox
The Flexible Box Layout or Flexbox is a module aiming to distribute space or aligning items inside a container in the easiest way possible. Currently, it’s a W3C Recommendation with its last update in November 2018.
A crucial difference between Flexbox and Grid it’s that Flexbox is a one-dimension system. Creating columns and rows in flexbox isn’t possible, but that’s a core part of its flexibility. Web-developers can order items and manage the space between them, even without knowing the size of the container.
This feature is convenient nowadays when web-developers need to design websites that users will retrieve in a wide variety of devices, like smartphones, laptops, or tablets.
Flexibility is an asset, and Flexbox gives that.
For displaying Flexbox, you select Flexbox in the display property of a container:
my-first-flexbox-container {
display: flexbox;
}Pretty easy, isn’t it? Yes, but beginners will need to learn some basic things about flexbox to take full advantage of this tool.
First, the default axis is horizontal-based and goes from left to right. If there’re four elements inside a container, they will order in this way by default:
For changing the order of the elements, add flex-direction property. For changing the initial position of the items, add justify-content property. For example, for ordering items like a column in the center, the code would be:
my-first-flexbox-container {
display: flex;
flex-direction: column;
justify-content: center;
}Master the basic concepts of Flexbox with A complete Guide to Flexbox and get fun playing this game.
Which is better: Flexbox, or Grid?
Both Grid and Flexbox can be used for building responsive design and complex layouts, but they are different techniques, and, like every web project, one is better than the other depending on what do you want to achieve.
Flexbox is a simple, reliable, and fast solution for small-layouts and the elements of an application. Meanwhile, Grid is a more reliable technique for big-scale layouts.