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

Even more modifications to the Black Goose Bakery CSS style sheet

1. Follow the instructions on pages 427, 434, 445, 461, 467, and 476 of the Class Text.

2. I have already created a folder in your Ch16 folder with the necessary files you will need to edit.  

3. You will start by editing the bakery-styles.css file.

4. As reference, the Chapter 16 textbook slides are in the Class Textbook and Resources section.

Read pages 419-427 before starting Exercise 16-1.

Exercise 16-1 What you need to know for this exercise

1. CSS Flexbox is discussed on pages 419 to 447 of Chapter 16 and includes Exercises 16-1 to 16-3.

2. CSS Grid Layout is discussed on pages 447-478 and includes Exercises 16-4 to 16-6.

3. To turn on flexbox mode for an element, set its display property to flex, e.g. #container { display: flex; } 

4. Some great flexbox tutorial sites:

   • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

   • https://flexboxfroggy.com/ 

   • https://flexbox.io/ 

   • https://codepen.io/enxaneta/full/adLPwv/ 

   • http://the-echoplex.net/flexyboxes/ 

5. The flex-direction property specifies how items should be aligned.  Its values are row, column, row-reverse, and column-reverse (p. 423).

NOTE: A great place to try out the various flex-direction values is here:

https://www.w3schools.com/cssref/css3_pr_flex-direction.asp 

6. The flex-wrap property makes the flexible items wrap if necessary (p. 425).

NOTE: A great place to try out the various flex-wrap values is here:

https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp 

7. The flex-flow property is a shorthand property for flex-direction and flex-wrap.

NOTE:  A great place to try out the flex-flow property is here:

https://www.w3schools.com/cssref/css3_pr_flex-flow.asp 

The image below is that of the actual exercise in the class text:

Exercise 16-1 Walkthrough

Page 427

Step 1A

Open the CSS file, bakery-styles.css, from the 16-1 and 16-6 bakery folder, in your text editor and the HTML document, bakery.html, in your browser. 

Step 1B

In the /* nav styles */ section of bakery-styles.css, make the ul element in the nav element as "neutral" as possible so it doesn't interfere with the flexbox.  Do this my removing all margins, remove allpadding, and remove the anchor tags <a> underlines.

/* nav styles */

nav, footer {

  font-family: verdana, sans-serif;

  background-color: #783F27;

}

nav ul li a:link, nav ul li a:visited {

  color: #F9AB33;

}

nav ul li a:focus, nav ul li a:hover, nav ul li a:active {

  color: #fff;

}

nav ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

}

Step 1C

The goal here is to apply flexbox to the navigation menu (Menu, News, About, and Contact) on top of the page.  We want the menu to have rows with no wrapping.  The elements in bakery.html that are the navigation menu are as shown below.  Note that all four menu items are inside a ul element.

READ THIS: The following is the navigation menu element from bakery.html.  It is shown here only for informational purposes.  You are not editing the bakery.html file.

  <nav>

    <ul>

      <li><a href="">Menu</a></li>

      <li><a href="">News</a></li>

      <li><a href="">About</a></li>

      <li><a href="">Contact</a></li>

    </ul>

  </nav>  

To turn the ul element in bakery.html (as shown above) into a flexbox, set its display property in the CSS file, bakery-styles.css, to flex, as shown here:

/* nav styles */

nav, footer {

  font-family: verdana, sans-serif;

  background-color: #783F27;

}

nav ul li a:link, nav ul li a:visited {

  color: #F9AB33;

}

nav ul li a:focus, nav ul li a:hover, nav ul li a:active {

  color: #fff;

}

nav ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

  display: flex;

}

Step 1D

 Save the bakery-styles.css style sheet, and look at bakery.html in a browser.  The menu links should be lined up tightly in a row.

Step 2

Make the a elements in the nav list items (i.e. <a href="">Menu</a> ) display as block elements instead of inline.  Give them 1px rounded borders, padding within the borders (.5em top and bottom, 1em left and right), and .5em margins to give them space and to open up the brown navigation bar.

Note: HTML Block and Inline Elements reminder:

• • block-level elements always start on a new line and takes up the full width available

  • inline elements do not start on a new line and only take up as much width as necessary 

Create a new nav ul li a selector in the nav section with those same properties:

/* nav styles */

nav, footer {

  font-family: verdana, sans-serif;

  background-color: #783F27;

}

nav ul li a:link, nav ul li a:visited {

  color: #F9AB33;

}

nav ul li a:focus, nav ul li a:hover, nav ul li a:active {

  color: #fff;

}

nav ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

  display: flex;

}

nav ul li {

  font-size: .8em;

  text-transform: uppercase;

  letter-spacing: .2em;

}

nav ul li a {   

  display: block;  

  border: 1px solid;  

  border-radius: .5em;  

  padding: .5em 1em;  

  margin: .5em; 

}

Step 3

To center the menu, use the justify-content: center; property in the nav ul element (this means to center all the li menu items that are in the unordered list (ul) in the nav element - see the bakery.html code above).

/* nav styles */

nav, footer {

  font-family: verdana, sans-serif;

  background-color: #783F27;

}

nav ul li a:link, nav ul li a:visited {

  color: #F9AB33;

}

nav ul li a:focus, nav ul li a:hover, nav ul li a:active {

  color: #fff;

}

nav ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

  display: flex;

  justify-content: center;

}

nav ul li {

  font-size: .8em;

  text-transform: uppercase;

  letter-spacing: .2em;

}

nav ul li a {   

  display: block;  

  border: 1px solid;  

  border-radius: .5em;  

  padding: .5em 1em;  

  margin: .5em; 

}

Step 4

Check your work by saving the bakery-styles.css style sheet, and then open (or reload) the bakery.html document in your web browser, and see if it matches the image here.

Before:

After:

Read pages 428-433 before starting Exercise 16-2.

Exercise 16-2 What you need to know for this exercise

1. The justify-content property defines how extra space should be distributed around, or between, items that are inflexible or have reached their maximum size.

2. Its values are flex-start, flex-end, center, space-between, and space-around.

NOTE: A great place to try out these various justify-content values is here:

https://www.w3schools.com/cssref/css3_pr_justify-content.asp   Scroll down to the yellow Play it buttons.

3. The align-items property is used to adjust the alignment on the cross axis (up and down when the direction is row, left and right if the direction is column).

4. Its values are flex-start, flex-end, center, baseline, and stretch.

NOTE: A great place to try out these various align-item values is here:

https://www.w3schools.com/cssref/css3_pr_align-items.asp 

5. The align-self property allows you to override the cross-axis setting for an item.

6. Its values are flex-start, flex-end, center, baseline, and stretch (the same as the align-items property).

NOTE: A great place to try out these align-self values is here:

https://www.w3schools.com/cssref/css3_pr_align-self.asp 

7. The align-content, affects how multiple flex lines are spread out across the cross axis.

8. Its values are flex-start, flex-end, center, space-around, space-between, and stretch.

NOTE: A great place to try out these various align-content values is here:

https://www.w3schools.com/cssref/css3_pr_align-content.asp 

Exercise 16-2 Walkthrough

Page 434

VERY IMPORTANT: Close the Exercise 16-1 files you were just editing in your text editor.  They are not used here in Exercise 16-2.  Move to the 16-2 and 16-3 flexbox folder in your Class folder.  There, in that folder, is the flex-menu.html document you will be using here in Exercise 16-2 and Exercise 16-3.

Step 1A

Open the flex-menu.html document located in the 16-2 and 16-3 flexbox folder into your text editor.  Open that same file in a browser to see how the menu items appear.  Because menu items are block elements, they are in a single column.  

NOTE: The large brown square along the edges of the screen is a border to help visualize the boundaries of the menu.  The div element in the html body, <div id="menu">, uses the id "menu", so in the internal style sheet, the #menu selector has the border: 3px solid #783F27; property.

Make the #menu wrapper div into a flex container:

#menu {

  border: 3px solid #783F27;

  display: flex;

}

Step 1B

Save and reload the page in the browser.  The menu items are now in a row (the default flexbox property). 

NOTE: Each menu item is in a section element (i.e. <section class="dish"> ), each of which takes up the full height of the #menu container, regardless of its content.

NOTE: In the section selector, the width is set to 240 pixels. 

section {

  background: #F6F3ED;

  margin: 10px;

  padding: 20px;

  border: 1px dotted maroon;

  width: 240px;

}

If the browser window is not wide enough, the menus on the right may become hidden:

Step 2A

Use the flex-direction property to see how it alters the menu items.  Add the flex-direction property to the #menu selector, and try some of the other values (row-reverse, column, column-reverse).  

Step 2B

Here is row-reverse:

#menu {

  border: 3px solid #783F27;

  display: flex;

  flex-direction: row-reverse;

}

Step 2C

Save flex-menu.html and reload it in the browser.  

Step 3D

Change the align-items: flex-start; property to align-items:flex-end;

#menu {

  border: 3px solid #783F27;

  display: flex;

  flex-direction: row;

  align-items: flex-end;

}

Step 3E

Save flex-menu.html and reload it in the browser.  

Step 3F

Change the align-items: flex-end; property to align-items: center;

#menu {

  border: 3px solid #783F27;

  display: flex;

  flex-direction: row;

  align-items: center;

}

Step 3G

Save flex-menu.html and reload it in the browser.  

Step 3H

Change the align-items: center; property to align-items: baseline;

#menu {

  border: 3px solid #783F27;

  display: flex;

  flex-direction: row;

  align-items: baseline;

}

Step 3I

Save flex-menu.html and reload it in the browser.  

Step 3J

Change the align-items: baseline; property to align-items: stretch value;

#menu {

  border: 3px solid #783F27;

  display: flex;

  flex-direction: row;

  align-items: stretch;

}

Step 3K

Save flex-menu.html and reload it in the browser.  

Step 4A

Make the menu items wrap onto multiple lines by using the flex-wrap property on the #menu container.  

#menu {

  border: 3px solid #783F27;

  display: flex;

  flex-direction: row;

  align-items: stretch;

  flex-wrap: wrap;

}

Step 4B

Save flex-menu.html and reload it in the browser.  

Step 5

To simplify things, replace the flex-direction and flex-wrap declarations with a single flex-flow declaration.

#menu {

  border: 3px solid #783F27;

  display: flex;

  flex-direction: row;

  align-items: stretch;

  flex-wrap: wrap;

  flex-flow: row wrap;

}

Step 6A

Items on the flex line are stacked toward the start of the main axis (in this case the left), by default.  You can change the main axis alignment with the justify-content property.  

Step 6B

Add the justify-content property with the value center; to the #menu flex container.

#menu {

  border: 3px solid #783F27;

  display: flex;

  align-items: stretch;

  flex-flow: row wrap;

  justify-content: center;

}

Step 6C

The menu items should now be centered.  Save flex-menu.html and reload it in the browser.

Step 6D

Change the justify-content: center; property to justify-content: flex-start;

#menu {

  border: 3px solid #783F27;

  display: flex;

  align-items: stretch;

  flex-flow: row wrap;

  justify-content: flex-start;

}

Step 6E

Save flex-menu.html and reload it in the browser.  

Step 6F

Change the justify-content: flex-start; property to justify-content: flex-end;

#menu {

  border: 3px solid #783F27;

  display: flex;

  align-items: stretch;

  flex-flow: row wrap;

  justify-content: flex-end;

}

Step 6G

Save flex-menu.html and reload it in the browser.  

Step 6H

Change the justify-content: flex-end; property to justify-content: space-between;

#menu {

  border: 3px solid #783F27;

  display: flex;

  align-items: stretch;

  flex-flow: row wrap;

  justify-content: space-between;

}

Step 6I

Save flex-menu.html and reload it in the browser.  Notice how the menu items are now spaced apart, evenly.

Step 6J

Change the justify-content: space-between; property to space-around;

#menu {

  border: 3px solid #783F27;

  display: flex;

  align-items: stretch;

  flex-flow: row wrap;

  justify-content: space-around;

}

Step 6K

Save the flex-menu.html document and reload it in the browser.  Notice how the menu items are now spaced apart, evenly.

Step 7A

Change the justify-content: space-around property to justify-content: center;

#menu {

  border: 3px solid #783F27;

  display: flex;

  align-items: stretch;

  flex-flow: row wrap;

  justify-content: center;

}

Step 7B

Make the price buttons line up at the bottom of each menu item.  Make each price button a nested flex container by setting its display to flex and specifying the flex-direction as column so they continue to stack up vertically.  Now the h2 and p elements become flex items within the section flex container.

section {

  background: #F6F3ED;

  margin: 10px;

  padding: 20px;

  border: 1px dotted maroon;

  width: 240px;

  display: flex;

  flex-direction: column;

}

Step 7C

Save flex-menu.html and reload it in the browser.

Step 7D

Use the margin: auto; property to push the price buttons down to the bottom of each menu.  Add this property declaration to the existing style rule for elements with the class name “price.”

.price {

  font-weight: bold;

  background: #F9AB33;

  padding: 5px;

  width: 100%;

  text-align: center;

  margin-top: auto;

}

Step 7E

Save flex-menu.html and reload it in the browser.

Read pages 436-444 before starting Exercise 16-3.

Exercise 16-3 What you need to know for this exercise

1. The flex property is the shorthand property for flex-grow, flex-shrink, and flex-basis, e.g. 

flex: flex-grow flex-shrink flex-basis; 

2. The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. 

NOTE: A great place to try out the various flex-grow values is here: 

https://www.w3schools.com/CSSref/css3_pr_flex-grow.asp 

3. The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container. 

NOTE: A great place to try out the various flex-shrink values is here: 

https://www.w3schools.com/CSSref/css3_pr_flex-shrink.asp 

4. The flex-basis property specifies the initial length of a flexible item. 

NOTE: A great place to try out the various flex-basis values is here: 

https://www.w3schools.com/cssreF/css3_pr_flex-basis.asp 

5. The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container. 

NOTE: A great place to try out the various order values is here: 

https://www.w3schools.com/cssref/css3_pr_order.asp 

Exercise 16-3 Walkthrough

Page 445

Step 1

Open the flex-menu.html file as you left it at the end of Exercise 16-2 (above).  We want to make the menu items fill the available space inside the menu container.  Use the flex: 1 1 auto; property, shortened to flex: auto; in the section selector to turn on the stretching behavior.

section {

  background: #F6F3ED;

  margin: 10px;

  padding: 20px;

  border: 1px dotted maroon;

  width: 240px;

  display: flex;

  flex-direction: column;

  flex: auto;

}

Step 2

Make the photos appear at the top of each menu item.   All of the table.jpg photos are p elements, like this:

<p class="photo"><img src="table.jpg" alt=""></p> 

Note that the p elements are all identified as class="photo".  Because each section is a flex container, we can use the order property to move its items around.   In this case, select the paragraphs with the “photo” class name, and give it a value less than the default value of 0 (zero).  Put this new class selector below the .price class selector.  This will make the photo display first in the line.

.price {

  font-weight: bold;

  background: #F9AB33;

  padding: 5px;

  width: 100%;

  text-align: center;

  margin-top: auto;

}

.photo {

  order: -1;

}

</style>

</head>

Step 3

One final touch is to make the images fill the width of their containers.  Set the with of the img elements to 100%

.price {

  font-weight: bold;

  background: #F9AB33;

  padding: 5px;

  width: 100%;

  text-align: center;

  margin-top: auto;

}

.photo {

  order: -1;

}

img {

  width: 100%;

}

</style>

</head>

This distorts the images, but it does make them fill the width of their containers.

Step 4

Save flex-menu.html and reload it in the browser.

Read pages 447-460 before starting Exercise 16-4.

Exercise 16-4 What you need to know for this exercise

That's it for now on Flexbox, now we look at CSS Grid Layout.

1. No amount of summary will suffice in teaching you how to use CSS Grid Layout, so you really need to read these pages (447-460) first.

2. The process for using the CSS Grid Layout Module is fundamentally simple: (p. 449)

• • Use the display property to turn an element into a grid container. The element’s children automatically become grid items.

  • Set up the columns and rows for the grid. You can set them up explicitly and/or provide directions for how rows and columns should get created on the fly.

  • Assign each grid item to an area on the grid. If you don’t assign them explicitly, they flow into the cells sequentially.

3. The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout (p. 452).

4. The grid-template-columns property specifies the number (and the widths) of columns in a grid layout (p. 452).

5. The grid-template-areas property specifies areas within the grid layout (p. 458)

6. The grid property is a shorthand property for (p. 459):

• • grid-template-rows

  • grid-template-columns

  • grid-template-areas

And also three more to be discussed later, on pages 468-470)

• • grid-auto-rows

  • grid-auto-columns

  • grid-auto-flow

Exercise 16-4 Walkthrough

Page 461

READ THIS: For this exercise, you will leave the 16-2 and 16-3 flexbox folder, and go to the Ch 16-4 and 16-5 folders in your Class folder.

Step 1A

To begin, open the grid.html file in the 16-4 and 16-5 grid folder in your Chapter 16 Exercise Assignment folder.  The grid.html document will look like this in your browser:

The goal is to set up this page using Grid Layout so that it looks like this:

Step 1B

Turn the containing element, the #layout div, into a grid container by setting its display mode to “grid”:

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

}

Step 2

Define the heights of the rows as specified in the sketch above, using the grid-template-rows: 3em 20px 150px 300px 5em; property.  The five values represent each of the five rows. 

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px 150px 300px 5em;

}

Step 3

Likewise, define the widths of the columns as specified in the sketch above as the property grid-template-columns: 1fr 20px 150px 20px 150px 20px 150px;

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px 150px 300px 5em;

  grid-template-columns: 1fr 20px 150px 20px 150px 20px 150px;

}

Since the last six columns have a repeating widths pattern, it can be shortened using the repeat() function.

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px 150px 300px 5em;

  grid-template-columns: 1fr repeat(3, 20px 150px);

}

The fraction unit (fr) allows you to create track widths that expand and contract depending on available space (p. 455).  One part of the available space is 1fr.  Here is an excellent resource that describes the fr unit:

https://alligator.io/css/css-grid-layout-fr-unit/ 

Step 4A

You can assign "line names" to grid lines as a means of identifying them.  The grid lines exist between the rows and the columns.  

Step 4B

Assign the line name “mainstart” to the grid line between the second and third row track measurements:

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns: 1fr repeat(3, 20px 150px); 

}

Step 4C

Assign the name “main-end” to the last grid line in the grid (after the last row track):

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

Step 4D

Save grid.html, and look at it in your browser.  It should look like this:

Read pages 463-466 before starting Exercise 16-5.

Exercise 16-5 What you need to know for this exercise

1. The grid-row-start property defines on which row-line the item will start. 

2. The grid-row-end property defines how many rows an item will span, or on which row-line the item will end .

3. The grid-column-start property defines on which column-line the item will start. 

4. The grid-column-end property defines how many columns an item will span, or on which column-line the item will end.

5. The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties::

• • grid-row-start

  • grid-row-end

6. The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

• • grid-column-start

  • grid-column-end

7. The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

• grid-row-start

• grid-column-start

• grid-row-end

• grid-column-end

Exercise 16-5 Walkthrough

Pages 467-468

Step 1

The next step is to place items into the correct grid areas.  Open the same grid.html document you were working on in the previous section (16-4) in your text editor.  Place a new nav element into the first row of the grid, using these four grid line properties:

nav { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 8; } 

Add that new nav selector with all its grid descriptors (properties and values) below the #layout selector like this:

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

nav {

  grid-row-start: 1;

  grid-row-end: 2;

  grid-column-start: 1;

  grid-column-end: 8;

} 

Step 2A

Put the third figure (#figC) in its place in the far-right column by using the shorthand grid-row and grid-column property.  The figure goes between the 3rd and 4th row grid lines and extends from the 7th to 8th column lines.  

Step 2B

For the column values, instead of using 7 and 8, use the negative value for the last line and span it .

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

nav {

  grid-row-start: 1;

  grid-row-end: 2;

  grid-column-start: 1;

  grid-column-end: 8;

} 

#figC {

  grid-row: 3 / 4;

  grid-column: span 1 / -1;

}

Step 2C

Position the #figA and #figB elements by using the grid-area property with line values. Remember that the values go in the order top, left, bottom, right (counterclockwise around the area).

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

nav {

  grid-row-start: 1;

  grid-row-end: 2;

  grid-column-start: 1;

  grid-column-end: 8;

} 

#figA {

  grid-area: 3 / 3 / 4 / 4;

}

#figB {

  grid-area: 3 / 5 / 4 / 6;

}

#figC {

  grid-row: 3 / 4;

  grid-column: span 1 / -1;

}

Step 3

The grid lines around the main area were given line names (see Exercise 16-4 step number 4).  Use these to place the main grid item.

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

nav {

  grid-row-start: 1;

  grid-row-end: 2;

  grid-column-start: 1;

  grid-column-end: 8;

} 

#figA {

  grid-area: 3 / 3 / 4 / 4;

}

#figB {

  grid-area: 3 / 5 / 4 / 6;

}

#figC {

  grid-row: 3 / 4;

  grid-column: span 1 / -1;

}

main {

  grid-row: main-start / main-end;

  grid-column: main-start / main-end;

}

Step 4 (Optional)

NOTE:  Creating a named area implicitly generates grid lines with the “-start” and “-end” suffixes.   When you name lines around an area *-start and *-end, (the * symbol is the wildcard symbol, meaning whatever term you put in front of -start and -end) it creates an implicitly named area *.  

NOTE: The Universal Selector (*)

The universal element selector (*) (also known as the multiplication symbol that is on your Shift + 8 key on your keyboard) matches any element , like a wildcard in programming languages.  The style rule

 * { border: 1px solid gray; } 

puts a 1-pixel gray border around every element in the document.  It is also useful as a contextual selector, as shown in this example that selects all elements in an “intro” section: 

 #intro * { color: gray; } (p. 285)

Because the lines were named according to this syntax, the main element could also be placed in the grid-area using this selector: main { grid-area: main; } 

This means that the main selector can be simplified from this,

main {

  grid-row: main-start / main-end;

  grid-column: main-start / main-end;

}

to this:

main {

  grid-area: main;

}

Step 4A

We need to put the footer into its place.  It starts at the last row grid line and spans back one track.  For columns, it starts at the third line and goes to the last.  Here is one way to write those instructions.

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

nav {

  grid-row-start: 1;

  grid-row-end: 2;

  grid-column-start: 1;

  grid-column-end: 8;

} 

#figA {

  grid-area: 3 / 3 / 4 / 4;

}

#figB {

  grid-area: 3 / 5 / 4 / 6;

}

#figC {

  grid-row: 3 / 4;

  grid-column: span 1 / -1;

}

main {

  grid-row: main-start / main-end;

  grid-column: main-start / main-end;

}

footer { 

  grid-row: 5 / 6;

  grid-column: 3 / -1;

} 

Step 4B

Save grid.html and look at it in the browser.  

Depending on the width of your browser window, when the browser is wide, the layout works fine, but when it is made narrower, the text in the main element overflows its cell (see below).  That’s because the 300-pixel height we gave that row is not sufficient to hold the text when it breaks onto additional lines or is resized larger.

Step 5A

This can be fixed by changing the measurement of the fifth row track to auto.  In that way, the height of that row will always be at least big enough to hold all of the content.

Change 300px to auto in the grid-template-row property.  Change this,

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

to this:

/* GRID STYLES START HERE */

#layout {

  margin-left: 5%;

  margin-right: 5%;

  display: grid;

  grid-template-rows: 3em 20px [main-start] 150px auto 5em [main-end];

  grid-template-columns:  [main-start] 1fr [main-end] repeat(3, 20px 150px); 

}

Step 5B

Save grid.html and look at it in the browser.  Now the text is always contained in its grid area, regardless of the width of the window.

Read pages 468-476 before starting Exercise 16-6.

Exercise 16-6 What you need to know for this exercise

1. The grid-auto-rows property sets a size for the rows in a grid container. 

2. The grid-auto-columns property sets a size for the columns in a grid container. 

3. The grid-auto-flow property controls how auto-placed items get inserted in the grid. 

4. The grid-row-gap property defines the size of the gap between the rows in a grid layout. 

5. The grid-column-gap property defines the size of the gap between the columns in a grid layout. 

6. The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties: grid-row-gap and grid-column-gap.

7. The justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.

8. The align-self property specifies the alignment for the selected item inside the flexible container. 

9. The justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. 

10. The align-items property sets the align-self value on all direct children as a group.  It controls the alignment of items on the Block Axis within their grid area. 

11. The justify-content property defines how the browser distributes space between and around content items along the inline axis of a grid container. 

12. The align-content property sets the distribution of space around content items of a grid container. It applies to a grid's tracks. 

Exercise 16-6 Walkthrough

Pages 476-477

Step 1A

The goal is to make the Black Goose Bakery page a two-column layout, as shown here: 

Step 1B

IMPORTANT: For this exercise, you will go back to the 16-1 and 16-6 bakery folder, open the HTML document bakery_ch16.html file in a text editor.  We need to add a bit of markup that encloses everything in the body of the document in an element that will serve as the grid container.   Add a div around all of the content elements (from header to footer), and give it the id name of “container”.

At the beginning of bakery_ch16.html, add the opening div tag <div id="container">  as the first line in the body element:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Black Goose Bakery</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Stint+Ultra+Expanded" rel="stylesheet">

<style>

@import url(bakery-styles.css);

</style>

</head>

<body>

<div id="container">

<header>

At the end of of bakery_ch16.html, insert the closing div tag, under </footer> and above </body>.

<footer>

<p>All content copyright &copy; 2017, Black Goose Bistro.</p>

  <div id="award"> 

    <img src="images/award.png" alt="Farmers' Market Award"> 

  </div> 

</footer>

</div>

</body>

</html>

Step 1C

Save bakery_ch16.html.

Step 1D

In the bakery-styles.css style sheet in the 16-1 and 16-6 bakery folder, add a new style to make the new div element display as a grid:

body {

  font-family: Georgia, serif;

  font-size: 100%;

  background-color: white;

  margin: 0;

}

/* GRID LAYOUT */

#container {

  display: grid;

}

Step 2

Three rows are needed to create the layout.  In the bakery-styles.css style sheet in the 16-1 and 16-6 bakery folder:

• Set the height of the first row track to auto so it will observe the height settings on the elements within it and automatically accommodate the content.  

• The second row has a lot of text, so use the auto track value again to guarantee the track will expand at least as much as necessary to fit the text.  

• For the third row, a height of 5em should be sufficient to fit the few lines of text with a comfortable amount of space:

/* GRID LAYOUT */

#container {

  display: grid;

  grid-template-rows: auto auto 5em;

}

Step 3

Continuing with the bakery-styles.css style sheet, two columns are needed for the layout, one for the main content and one for the Hours sidebar.  Use the minmax() value to ensure the text column never gets narrower than 25em, but it can expand to fill the available space in the browser (1fr).   The Hours column can be set at 16em.

/* GRID LAYOUT */

#container {

  display: grid;

  grid-template-rows: auto auto 5em;

  grid-template-columns: minmax(25em, 1fr) 16em;

}

Step 4

The areas in the grid need to named so that items can be placed in it. Use the grid-template-areas property to name the cells in the grid:

/* GRID LAYOUT */

#container {

  display: grid;

  grid-template-rows: auto auto 5em;

  grid-template-columns: minmax(25em, 1fr) 16em;

  grid-template-areas: 

    "banner banner"

    "main hours"

    "footer footer";

}

Step 5A

Now that the areas of the grid have been named, the content items can be put in their proper place.  Create a style rule for each grid item and tell it where to go with the grid-area: property:

/* GRID LAYOUT */

#container {

  display: grid;

  grid-template-rows: auto auto 5em;

  grid-template-columns: minmax(25em, 1fr) 16em;

  grid-template-areas: 

    "banner banner"

    "main hours"

    "footer footer";

}

header {

  grid-area: banner;

}

main {

  grid-area: main;

}

aside {

  grid-area: hours;

}

footer {

  grid-area: footer;

}

Step 5B

Save bakery-styles.css and take a look at bakery_ch16.html in the browser.  It should look like the image below:

Step 5C

The final change is to have the right column text fill the width of the column.  Remove the right margin and border radius we had set on the aside so it fills the right column.

/* aside "hours" styles */

aside {

  background: url(images/scallop.png) repeat-y left top;

  background-color: #F6F3ED;

  padding: 1em;

  padding-left: 45px;

  border-top-right-radius: 25px;

  margin: 1em 2.5% 0 10%;

}

Step5D

Save bakery-styles.css file and take a look at the bakery_ch16.html document in the browser.  It should look like the image below: