In the past decade, we have entered what is known as the "Mobile first paradigm" of styling. Front End developers have to create sites that look good on many different sized devices, with smaller, Mobile screens taking up a massive share of our screen time. Having a font size of 36px and a margin of 50px might look great on your Macbook screen in development, but how is it going to look on your Apple Watch when the page is deployed? To meet this need, we as programmers needed a way to create responsive styling, which would auto-change and position itself based on the size of the screen.
Enter Flex and Grid, two modern CSS frameworks that will allow us to use logic and math to style and position our websites, so that they look good on a small phone, a massive HD monitor, and everywhere in between.
In this lesson, we'll learn how to use Flexbox and Grid to align elements in our web pages. They both have different use cases and each are very valuable to any front end developer. You may not be able to master them in the course of one night. But as you continue to build up and work with projects over the coming weeks, you will see the usage and the power of these two incredible peices of code.
- Describe the Use Case of Flexbox & CSS Grid
- Use Flexbox for One-Dimensional Layout
- Use CSS Grid for Two-Dimensional Layout
ForkandClonethis repositorycdinto the repository- Use the command
code .to open in VS Code
Start by creating a new index.html and style.css file in the lesson's directory using terminal commands. These should be second nature by now.
-
First, in our HTML file, let's add our boilerplate HTML by typing ! + tab. If it doesn't work for you, feel free to type out the boilerplate yourself.
-
Next, let's be sure and link our HTML file to our CSS file by adding the following line of code above our title in our head tag:
<link rel="stylesheet" href="style.css" />
-
Finally, let's add a bit of starting CSS inside of the
style.cssfile that we just created:* { box-sizing: border-box; } body { margin: 0; }
The capabilities of Flexbox & CSS Grid complement each other. You can use both side-by-side, and even nest them within one another.
To best understand Flexbox & CSS Grid, it's important to remember what CSS stands for - Cascading Style Sheets. Understanding how the different sections of your web page relate to each other is critical to understanding how the CSS you write will affect it.
CSS operates on a parent/child structure with the outermost sections of a page affecting the innermost (like Russian Dolls).
The difference between Flexbox and CSS Grid is how they are designed to lay out their children:
Flexbox excels at assisting devs with the following tasks:
- Vertically centering content & elements within a container element
- Spacing child elements within a container uniformly
- Making the height of child elements laid out in columns the same even though they have a different amount of content.
We use the CSS display: flex; declaration to make an element a flex container, for example:
section {
display: flex;
}The above would make all <section> elements flex containers and all direct children would become flex items.
Let's open a new tab in our browser and briefly review what has become the de facto guide to Flexbox.
We're going to make a navigation bar using Flexbox.
Add the following markup for the nav bar inside of the <body> tags in our HTML file (don't copy and paste; build that muscle memory!):
<nav>
<div>HOME</div>
<div>ABOUT</div>
<div>WIDGETS</div>
<div>LOG OUT</div>
</nav>Open it up in your browser to check it out - that's definitely not what we're looking for!
Which element needs to be our flex container?
Next, let's make the <nav> a Flexbox:
nav {
display: flex;
}Refresh, and we can make the following observations:
- The flex items are laid out horizontally in a row - this is the default layout of a flex container.
- The
<div>elements have become flex items and no longer behave as block elements - their width has collapsed to that of their content and they are willing to sit side-by-side other elements.
The navigation bar must:
- Be
50pxin height - Have a background color of
#F03F3C.
The menu items in the nav bar need:
- A font size of
20px - A margin of
10pxon all 4 sides - A text color of
#FFFFFF
Add the CSS to meet the standard!
A flex container has a flex-direction property that defines the direction of its main axis.
There are four values:
row- the defaultrow-reversecolumncolumn-reverse
Let's check them out by adding a flex-direction to the <nav>.
In addition to the concept of a main axis, a flex container has a cross axis which represents the opposite direction of its main axis.
For example, if the flex-direction is set to row (the default), the:
- main axis is horizontal
- cross axis is vertical
If the flex-direction is set to column, they flip:
- main axis is vertical
- cross axis is horizontal
The concepts of main axis & cross axis come into play when it comes to sizing and layout properties, such as:
justify-content: Controls alignment for the main axisalign-items: Controls alignment for the cross axis
With the following alignment properties set:
nav {
display: flex;
flex-direction: row; /* default */
justify-content: flex-start; /* default */
height: 50px;
background-color: #f03f3c;
}The nav bar's not looking too bad...
Let's say you want the LOG OUT menu item to be aligned on the right:
You could wrap the other three with another element and set the justify-content to space-between like this...
HTML:
<nav>
<section>
<div>HOME</div>
<div>ABOUT</div>
<div>WIDGETS</div>
</section>
<div>LOG OUT</div>
</nav>CSS:
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 50px;
background-color: #F03F3C;
}
/* Don't forget to make the new HTML element a flexbox too! */
section {
display: flex;
}1. When an element has a CSS property of display: flex;, that element becomes a flex _______________.
2. When an element has a CSS property of display: flex;, its direct children become flex _______________.
3. What value is the default for the flex-direction property?
4. Is it justify-content or align-items that controls the alignment along the cross axis?
CSS Grid is a great option when you have:
- A page layout like this (or as complex as you'd like):
- Any other "components" that would benefit from a grid-type layout such as a "profile card". In other words, CSS Grid doesn't have to apply to the whole page - it can be useful for laying out smaller "components" as well.
Unlike Flexbox, CSS Grid lays out its grid items in two-dimensions.
CSS Grids have the concept of the following:
- Tracks
- Cells
- Areas
- Gaps
Let's examine a diagram to visualize these components...
As you might expect, there are plenty of CSS Grid-related properties and values.
Here's the CSS Grid equivalent of that Flexbox guide we used earlier.
Let's open it up in a new tab and take a peek.
To try out CSS Grid, we'll continue to work in VSCode to layout this UI:
The following CSS turns the <body> element into a grid container:
body {
display: grid;
height: 100vh;
margin: 0;
font-family: Helvetica;
}Using height: 100vh; will make the <body> fill the height of the browser window so that the <footer> is at the bottom.
Let's add the additional HTML required by the UI:
<body>
<nav>
<section>
<div>HOME</div>
<div>ABOUT</div>
<div>WIDGETS</div>
</section>
<div>LOG OUT</div>
</nav>
<aside>SIDE BAR</aside>
<main>MAIN CONTENT</main>
<footer>FOOTER</footer>
</body>Now for a touch of styling...
Let's change the color of the elements we just added so that we can more easily see them:
aside {
background-color: #fae00c;
}
main {
background-color: #226afa;
}
footer {
background-color: #63d629;
}One more stylistic touch. What if we want to center the text in those elements both horizontally and vertically?
Wanting to center/center content is so common, let's create a class that will make any element with that class a Flexbox:
.flex-ctr {
display: flex;
justify-content: center;
align-items: center;
}With the class defined - go ahead and add it to the <aside>, <main> & <footer> elements.
Using Chrome DevTools to explore the page's elements, we can make the following observations:
- A CSS Grid has a single column by default.
- Each grid item (direct child) was placed its own row by default.
Now let's define the columns and rows necessary to layout our page as desired. Go back and look at the UI we want to layout and answer these questions:
- How many columns will we need to define?
- How many rows?
Okay, let's define those column and rows:
body {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 50px 1fr 30px;
...The fr unit is used by CSS Grid to represent a fraction of the available space. So in our layout, the first column will be 1/5th the width of the window.
Refreshing the page shows that we've made a mess. But notice how each grid item is simply being placed in each cell across the columns from left to right. This is the default behavior.
However, we need both the <nav> and the <footer> to span two columns each...
There are a couple of ways to make grid items cover rectangular grid areas.
One way is by defining grid-template-areas on the grid container; then using the grid-area property on the grid item.
However, in this lesson, we'll look at another option...
The grid-column CSS property determines which grid lines a grid item starts and ends on.
For example:
nav,
footer {
grid-column: 1 / 3;
}The lines are numbered starting with 1 (not zero).
We will use span x to specify how many columns we want to span. Add this to your CSS:
nav,
footer {
grid-column: span 2;
}Unsurprisingly, there's a grid-row property as well.
Both grid-column & grid-row are shorthand for grid-column-start & grid-column-end, and grid-row-start & grid-row-end, respectively.
The last thing we'll look at in regards to CSS Grid are grid gaps which specify the size of the grid lines.
Update the CSS of the <body> (grid container) to the following:
body {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px; /* specifies width of grid lines */
...Note that the grid gaps cannot be styled - it is literally anti-style.
We learned all about how to use Flexbox and CSS Grid when trying to lay out our web pages. These are extremely useful tools for any Front End Developer and allow us to really achieve dynamic and engaging layouts!