Mastering CSS Flex and Grid can be challenging. This activity highlights some of the most relevant layouts and
the principles behind them.
Prepare
When do I use CSS Flex versus CSS Grid?
Depending on the desired layout, you can often make either method work. You can even use them together, such as
using flex to align items within a grid item.
Choose Flex
Simple Layouts: CSS Flex is ideal for one-dimensional layouts like navigation, or any group
of items that need to be shown side by side or one on top of the other.
Alignment: Flex is great at aligning items horizontally or vertically.
Dynamic Content: Flex is often ideal for layouts with dynamic content where items sizes may
vary.
Choose Grid
Complex Layouts: CSS Grid is generally more robust, allowing you to create two-dimensional
layouts for common structures like tables, calendars, merged cells, and more.
Fixed Width Layouts: Grid is suitable for fixed-width layouts, where item sizes are known.
Overlap and Layering: Grid supports overlapping and the layering of the items.
Common Layout Methods
Define the direction of the Flex items using
flex-direction: (row/column); (row is default).
display: flex;
flex-direction: column;
Centering Horizontally and Vertically: The following code centers the child item both
horizontally and vertically using CSS Grid. Of course, this code is applied to the parent, grid
container.
display: grid;
place-items: center;
Centering can also be controlled with the following code for both Flex and
Grid:
display: flex; /* or grid */
justify-content: center;
align-items: center;
Log into your CodePen account. If you do not have an account, you can create one for free. An account allows
you to save pens to your own account.
Accounts at CodePen are free. You can use your Google, GitHub, Facebook, or an email account of your choice
to sign up.
It is highly recommended that you obtain an account to manage your own snippets of work and fork, i.e.,
copy, useful
pens that you discover. You are not required to get an account as you can view and edit the code in the pen
for free, however, your changes will not be saved for future use and reference.
Complete the three exercises to the best of your ability. The following images are screenshots of the
solutions:
Check Your Understanding
