And The Answer is...
Most likely both!
Sweet! Consider this article read. Have yourself a magnificent day of coding. Or, keep reading to find out why!
Background
The CSS Flexible Box (Flexbox) and CSS Grid Layout (Grid) are CSS modules designed to make layouts and positioning in HTML a lot easier. It enables users to lay out elements without using CSS floats and positioning.
Flexbox was first introduced in 2009 and has since worked itself up to be a World Wide Web Consortium (W3C) candidate recommendation.
Grid was initially proposed by Microsoft in 2011 to the CSS Working Group. Akin to Flexbox it is also a W3C candidate recommendation.
Similarities
Set up
Flexbox and Grid both work by setting up container in which elements will be 'flexed' OR 'gridded'. Please note: I just made those words up.
In your stylesheet for the container's class or id you can set it to be flexbox controlled or grid controlled with the following code:
display: flex or display: grid
Notice that you cannot both flex and grid a single container. However, that isn't to say you can't nest containers to achieve maximum POWER.
Syntax
There also exist similarities in attribute syntax. Lines such as flex-start and grid-column-start use positioning keywords that land elements at the beginning of their containers.
Differences
Dimension
The main difference between Grid and Flexbox is that Grid works best in a two dimensional space (ie: both columns and rows) while Flexbox is best used in a single dimensional space (ie: columns or rows).
This generally leads to the larger containers for a websites layout being defined by grid and nested elements in a Flexbox containers. However, this is not a hard and fast rule.
Blackjack Example
A recent small team project I worked on was creating a blackjack game. For that project we opted to use the CSS framework Bootstrap. However, let's dive in to how I might define certain page elements using Grid and Flexbox.
Grid Measurements
As it's name implies, the basis of Grid is first defining a grid by it's number of rows and columns. You can further refine the size and position of these rows and columns to create. This can be done in a multitude of methods.
Here is the vision for our blackjack game top to bottom:
- A header that has a name, balance, and logout button that are displayed evenly horizontally.
- A blackjack table and some betting actions side by side. There will be two betting actions (hit and stay) on top of one another.
- A footer with a centered element that displays who created the game
So let's count the rows and columns. Looks like 3 rows right? Not so fast! Certainly the header and footer are a single row. However, the betting actions area has at least two rows nested in it. Let's make it 4 for scalability. Note that the blackjack table will also be contained on these rows.
So 1 row for a header, 4 for the table/betting actions, and 1 for a footer.
6 rows!
Ok how about columns. The header may be a candidate with it's elements needing to be evenly spaced. However, this is a one dimensional row, so it is really a task better suited for Flexbox later on. Rows 2 - 5 look like they just have 2 columns for a blackjack table and some betting actions.
Row 6 with the footer looks like it has some potential. Let's have it centered, but not take up the entire width of the page.
A total of 5 columns should work nicely. In row 1, the header will take up all 5 columns. In rows 2-5 the blackjack table will take up 3 columns and the betting actions will take up 2. In row 6 the footer will take up 3 of the columns in the center, with one column of white space on either side.
5 columns!
Grid Container CSS
So we know we need a 6 x 5 CSS grid. Let's think about sizing of our rows. The header and footer should take up about 10% vertical space of the page each. That leaves 80% for the table and betting actions.
For the column sizing, we don't have to worry about size. We will dictate how many columns each element takes.
Our container will have a class of 'grid-container'. There are many many ways to write out grids. I highly recommend checking out links at the bottom such as Grid Garden to get started on these. For demonstration, I'm going to use % (percent of container) and fr (fraction of a container).
.grid-container {
display: grid;
grid-template-rows: 10% 1fr 1fr 1fr 1fr 10%;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
Looks great! Let's move on to defining where our elements will go in our grid.
Grid Elements HTML/CSS
Note: The code for the following demo is hosted on this code pen repo. Feel free to follow along, and play around with commenting and uncommenting code as you go.
Header
We want the header to span the entire page on row 1. So it will take up all columns and only row 1. Again, there are many ways to write this, so I'll keep it explicit with start and end points of each element. Keep in mind CSS grid snaps 'up to' a column. So to span two columns we go from 1 to 6.
#header {
grid-row: 1;
grid-column: 1 / 6;
}
Blackjack Table
Here the table should span 4 rows and 3 columns. This will have it occupy 3/5 of the page horizontally.
#blackjack-table {
grid-row: 2 / 6;
grid-column: 1 / 4;
}
Betting actions
A hit button and stay button are in line with the blackjack table with the hit button occupying the upper two rows of the right column, with the stay button beneath it.
#hit-button {
grid-row: 2 / 4;
grid-column: 4 / 6;
}
#stay-button {
grid-row: 4 / 6;
grid-column: 4 / 6;
}
Footer
Footer goes in the last row and takes up the three center columns.
.footer {
grid-row: 6;
grid-column: 2 / 5;
}
And that's it! We've done everything we can with Grid! Things are in the right place. Now let's clean up the elements inside our elements/divs.
Flexbox Usage
Flexbox is great for working within elements that have a single dimension of sub-elements. This might be a div with nested text, or a div with a nested row or nested column. A row or a column is a single dimension, thus there is no need to make a new grid.
We can jump right into the CSS for each of our div elements. For the table, the betting buttons, and the footer, everything will be centered in each direction. Here is the CSS for the blackjack-table.
#blackjack-table {
display: flex;
justify-content: center:
align-items: center;
}
For the header. We know we want the three nested elements (username, balance, and logout button) to be right justified in a row. We want them centered vertically in the header.
Without any css they appear as a column on the left side of the header, so it's going to be quite the change.
#header {
display: flex;
flex-direction: row;
justify-content: space-around:
align-items: center;
}
Summary
Let's check out our work
Looks great!
Resources
Some awesome, awesome resources on CSS Grid and Flexbox
Flexbox Froggy (learn CSS Flexbox with a fun interactive website)
GridGarden (learn CSS Grid with a fun interactive website)
CSS Grid vs CSS Flexbox by Academind on Youtube
Codepen with a pre built grid for playing around
Lots more cool background, links, info, tutorials, and articles on Hackernoon
Top comments (0)