Home > Chapter Review and Exercises > Chapter 16 - Flexbox and Grid

Summary 

Chapter 16 covers the newer CSS layout tools and it should be treated as two big chapters.  Flexbox and Grid are now acknowledged to be the “right” way to handle the layout of multi-part components and columned page layout.

First, it is important to understand the purpose of each tool.  Flexbox arranges items along one axis (a row or a column), like beads on a string.  Each flex item (“bead”) can be set to stretch or shrink to fit the available space and the “string” may be set to wrap onto multiple lines. Flexbox is useful for items that line up, like menubars, complex header components, and gallery-like spaces where multliple images or product “cards” flow into a content area. Flexbox can be used to lay out a whole page, but that is not its strong suit because you can’t force items on separate wrapped lines to line up with one another; it works on one axis only.

Grid Layout, on the other hand, provides a way to line up items into both rows and columns (two axes). The row and column tracks and the grid container itself can be set to be rigid, flexible, or based on the content within the cells.  It is an amazingly versatile system.

Grid and Flexbox (as well as floating and positioning) can be used together; for example, laying out a page structure with a grid, then using Flexbox to handle components within that grid.  You should become familiar with both techniques.

Both Flexbox and Grid offer ways to allow content to expand or shrink into available spaces, making them excellent solutions for web pages that will be viewed on a huge range of screen sizes. With that versatility, however, comes complexity. Both of these new specs can seem daunting at first because of the number of options, many of which are brand new concepts. Although each technique has a lot of moving parts and will require some attention to master, they are worth the time and effort.

Takeaways

In Chapter 16, you will learn the following:

Flexbox

• How Flexbox is useful for responsive layouts because items can adapt to the width of the viewport. Flexbox also makes it easy for items to be the same height and to center items horizontally and vertically (which were previously difficult to do with CSS properties).

• How to make an item a flex container by setting its display property to flex.  Its children automatically become flex items within the container.

• Flex items can be arranged on a horizontal or vertical axis, as specified with the flex-direction property. By default, it is the same direction as the writing direction for the document’s language.

• The parts of a flex container: main axis (including main start, main size, and main end) and cross axis (including cross start, cross size, and cross end).  The main axis corresponds to the direction specified with flex-direction.

• Controlling whether flex items wrap onto new lines (flex-wrap).

• How to align flex items: justify-content sets alignment on the main axis; align-items sets alignment on the cross axis.  If there are multiple wrapped lines, the align-content controls how they are aligned on the cross axis.

• Specifying how individual items shrink or expand using the flex property, including handy shortcut flex values for typical Flexbox scenarios.

• How to rearrange the order of flex items in the container (using the order property) independently of how they appear in the document source.

• Browser support issues with Flexbox.

NOTE: With Flexbox, the trickiest part is getting used to the direction-agnostic terminology and mastering the alignment and flex properties.

Grid

• How grids work: Make an element a grid container (display: grid), set up the columns and rows in the grid (the template), assign each grid item to an area on the grid.

• Familiarity with the parts of the grid (grid container, grid item, lines, tracks, cells, areas, block axis, and inline axis).

• How to define grid tracks using grid-template-rows and grid-template-columns (also the grid-template and grid shorthand properties).

• An understanding of grid line numbering, explicit line naming, and implicit (automatic) line naming.

• All the options for defining the width and height of a grid track: lengths, % values, fractional units (fr), min-content, max-content, auto, minmax(), fit-content(), and repeat().

• Assigning names to areas on the grid so they can be used to place items on the grid (grid-template-areas).

• How to place items on the grid using lines (grid-row-start, grid-row-end, grid-column-start, grid-column-end, and the shorthand grid-row and grid-column properties).

• How to position items on the grid using named grid areas (grid-area).

• Using grid-auto-rows, grid-auto-columns, and grid-auto-flow properties to set parameters for implicit grid behavior.

• Alignment properties for aligning grid item elements within grid cells when there is extra room (justify-items, align-items, justify-self, align-self).

• Alignment properties for aligning grid tracks in a larger container (justify-content, align-content).

NOTE:  The thing that makes Grid feel complicated is that there are a lot of different ways to accomplish each task (such as identifying grid lines and specifying track sizes).  Keep in mind that the system of setting up a grid and putting items in it is fairly straightforward.

The trick to mastering Grid is to become familiar with the various methods for specifying track size as well as taking advantage of Grid’s features for filling grid cells, rows, and columns automatically.

Key terms in Chapter 16

flex container

An element that has its display set to flex (its children become flex items).

flex items

The children of a flex container that line up along a specified axis. 

nested flexbox

Flex items can be made into flex containers by setting their display to flex.

flow

The direction in which flex items are laid out as well as whether they are permitted to wrap onto additional lines.

main axis

The flow direction specified for the flex container. For horizontal languages, when flow is set to row, the main axis is horizontal.

cross axis

The cross axis is whatever direction is perpendicular to the main axis (vertical when flow is set to row).

main size

The width of the container along the main axis if it is set to row (or the height of the container if it is set to column).

cross size

The height along the cross axis if it is a row (or the width if it is a column).

flex

The quality of flex items that allows them to resize to fit available space.  It is concerned with how extra space is distributed within items.

relative flex

When flex-basis is a value other than zero, extra space is divided up based on their flex ratios. An item with a flex ratio of 2 would get twice as much extra space allotted to it than an item with a flex ratio of 1 (although it may not end up twice as wide as 1 depending on its content).

absolute flex

When flex-basis is 0, items are themselves sized proportionally according to their flex ratios. An item with a flex ratio of 2 would be twice as wide as one with a flex ratio of 1.

grid container

An element that has its display set to grid (its children become grid items).

grid item

Direct children of a grid container that end up positioned on the grid.

grid line

The horizontal and vertical dividing lines of the grid. Grid lines may be assigned names and are numbered automatically.

grid cell

The smallest unit of a grid which is bordered by four adjacent grid cells.

grid area

A rectangular area made up of one or more adjacent grid cells.

grid track

Space between two adjacent grid lines (a generic name for column or row).

block axis

The vertical axis of a grid (for languages written horizontally).

inline axis

The horizontal axis of a grid (for languages written horizontally).

fractional unit (fr)

A grid-specific unit of measurement that allows an item to expand and contract depending on the available space.

implicit grid behavior

Automatic grid behaviors such as pouring grid items into cells sequentially if they haven’t been explicitly positioned on the grid, or creating additional rows and columns on the fly to accommodate extra items.

Exercises in Chapter 16

16-1: Making a navigation bar with Flexbox

This exercise uses the basic Flexbox properties to turn the navigation list on the Black Goose Bakery page into a horizontal menu.

16-2: A flexible online menu

The sample page with multiple menu items (similar to the structure of a gallery or product listing page) provides the basis for exploring flex properties throughout this section. This first exercise creates a flex container and plays around with row direction, wrapping, and alignment to get a feel for how the properties work.

16-3: Adjusting flex and order

Here items are made to fill the available space using the flex property, and items within them are rearranged via nested flex containers and the order property.

16-4: Setting up a grid

The first step to creating a grid-based layout for a “Breads of the World” page is to set up a grid container and define its rows and columns. Because items are not placed on the grid, they flow in sequentially (that gets fixed in the next exercise).

16-5: Placing items on a grid

You are asked to explicitly place grid items on the established grid using a variety of approaches with line numbers and names.

16-6: A grid layout for the bakery page

We return to the Black Goose Bakery page to give it a two-column layout using CSS Grid.  Items are placed on the grid using named grid areas, which is a very straightforward approach for this simple page.

Test Yourself

Additional Supplemental Resources - Going Beyond

CSS Grid VS Flexbox - A Practical Comparison <== NEW

• CSS Grid vs Flexbox

• Walkthrough comparison

• File Download

CSS Flexbox Layout Guide <== NEW

• Download

CSS Flexbox and Grid Online Generators

• Layoutit Grid: Learning CSS Grid Visually With a Generator

Resources Noted in the Text

• Autoprefixer - helps getting FlexBox to work on all web browsers

• Examples of Grid-based designs

• Browser Support page at the “Grid by Example” site, created by Rachel Andrew

Online Flex games you can try

• Grid Garden by Thomas Park - try this

• Flexbox Froggy

• Flexbox Defense

• Flexbox Tutorial (CSS) Real Layout Examples - by LearnWebCode

• CSS Grid Tutorial: Responsive Design Examples - by LearnWebCode

• “Page Layout with Floats and Positioning” - by the author 

• LearnWebCode (YouTube Videos on CSS and JavaScript)

Chapter Exercises