In this exercise, we'll set up the grid template for the page shown in FIGURE 16- 37. We'll place the grid items into the grid in EXERCISE 16-5, So for now just pay attention to setting up the rows and columns.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Black Goose Bakery Grid</title>
<link href="https://fonts.googleapis.com/css?family=Stint+Ultra+Expanded" rel="stylesheet">
<style>
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
font-family: Georgia, serif;
font-size: 100%;
background-color: white;
margin: 0;
}
/* GRID STYLES START HERE */
#layout {
margin-left: 5%;
margin-right: 5%;
}
/* VISUAL STYLES START HERE */
/* link styles */
a:link, a:visited { color: #DC6903; }
a:focus, a:hover, a:active { color: #F9AB33; }
a {
text-decoration: none;
border-bottom: 1px dotted;
padding-bottom: .2em;
}
/* 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;
}
/* main styles */
main {
font-family: 'Stint Ultra Expanded', Georgia, serif;
background-color: white;
line-height: 1.8em;
color: #555;
padding: 1em;
border: double 4px #EADDC4;
border-radius: 25px;
}
/* misc styles */
figure {
margin: 0;
padding: 0;'
/* clears browser styles for figures */
}
footer {
color: #EADDC4;
text-align: center;
font-size: .8em;
padding: .5em;
}
</style>
</head>
<body>
<div id="layout">
<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>
<main>
<h2>Introducing: Breads of the World!</h2>
<p>It seems as though every region of the world has its own special take on this staple of humankind. From crusty french baguettes to table-sized Afghan flat-breads, breads can come in all shapes, sizes, and textures.</p>
<p>Each month, we feature a bread that is the specialty of a particular culture or part of the world. Some will be made in-house by our bakers who travel around the world learning regional techniques in order to bring them back for you to try. Other breads will be provided by local bakeries that have been making bread for their communities for generations.</p>
<p>When you are in the bakery, we encourage you to give our featured Bread of the World a try. If you can't make it to the shop, many of our breads will be available for purchase online.</p>
<p>Providing you with fresh, unique breads is one of the things that makes Black Goose Bakery proud.</p>
<!--
<p>Our breads are made daily from highest-quality whole grain flour, water, salt, and yeast or sourdough starter. Simply and naturally, and never any preservatives. Patience is key to achieving the proper level of fermentation and baking each loaf to perfection. Available in whole grain, sourdough, olive loaf, classic rye, and potato-onion.</p>
-->
</main>
<figure id="figA"><img src="images/uzbek_150.jpg"></figure>
<figure id="figB"><img src="images/bread_150.jpg"></figure>
<figure id="figC"><img src="images/braided_150.jpg"></figure>
<footer>
<p><strong>Black Goose Bakery</strong> | Seekonk, MA <br>
Monday – Friday: 5am to 3pm | Saturday & Sunday: 6am to 4pm</p>
</footer>
</div>
</body>
</html>
![In this exercise, we'll set up the grid template for the page shown in FIGURE 18-
37. We'll place the grid items into the grid in EXERCISE 16-5, so for now just pay
attention to setting up the rows and columns.
NOTE
You will need to use a browser that supports grids for this exercise.
I am using Firefox in order to take advantage of the Grid Inspector
tool. Supporting browsers are listed earlier in this section. See the
"Firefox Grid Inspector and Layout Panel" sidebar for instructions
on how to open the tool.
This page is similar to the bakery page we've been working on, but it has a
few more elements and whitespace to make things interesting. The starter
document, grid.html, is provided with the exercise materials at
learningwebdesign.com/5emateriais. Open it in a text editor, and you'll see that all of
the styles affecting the appearance of each element are provided.
Зет
20рх
Introducting Breade of the Worldi
150рх
300px
ndthe
yuy
Sem
1fr
150px
150px
150px
20рх
20рх
20px
FIGURE 16-37. The Breads of the World page that we will create using Grid Layout.
1. Start by turning the containing element, the #layout div, into a grid con-
tainer by setting its display mode to "grid":
#layout { - display: grid;}
2. FIGURE 16-37 shows the row and column tracks required to accommodate
the content in the desired layout. Start by defining the rows as specified
in the sketch, using the grid-template-rows property. There should be
five values, representing each of the five rows. (Spoiler alert: we'll be
tweaking these values when we get to the next exercise. This is just a
starting point.)
#layout {
display: grid; grid-template-rows: 3em 20px 1](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F0bff02cc-d5b5-4ce4-afb4-cc3f0e85b8f4%2Fec577bd0-369c-466d-92af-0e546858a76e%2Fvj0njsr_processed.png&w=3840&q=75)
![3. Do the same for the seven columns. Because I want the text column to
grow and shrink with the available space, I've specified its width in frac-
tional units (1fr). The remaining columns create 150px-wide cells for
three images and 20px of space before them.
You can write them all out like this:
grid-template-columns: 1fr 2epx 150px 20px 150px 20px 150p
However, because the last six columns are a repeating pattern, it would
be easier to use the repeat() function to repeat the spaces and figure
columns three times:
grid-template-columns: 1fr repeat(3, 20px 15epx);
4. Finally, let's assign names to the grid lines that border the grid area
where the main content element should appear. The names give us some
intuitive options for placing that item later. The main area starts at the
third row track, so assign the name "main-start" to the grid line between
the second and third row track measurements:
grid-template-rows: 3em 20px [main-start] 150px 300px 5em;
The main area extends into the last row track, so assign the name
"main-end" to the last grid line in the grid (after the last row track):
grid-template-rows: 3em 20px [main-start] 150px 300px 5em [m
5. Now do the same for the grid lines that mark the boundaries of the col-
umn track where the main content goes:
grid-template-columns: [main-start] 1fr [main-end] repeat (3
I've saved my work and looked at it in Firefox with the Grid Inspector turned
on (FIGURE 18-38). Because I haven't specified where the grid items go, they
flowed into the cells sequentially, making the mess you see in the figure.
However, the grid overlay reveals that the structure of the grid looks solid.
Save the file and hold on to it until the next exercise.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F0bff02cc-d5b5-4ce4-afb4-cc3f0e85b8f4%2Fec577bd0-369c-466d-92af-0e546858a76e%2Fh3lcuy_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 4 steps with 6 images
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Concepts of Database Management](https://www.bartleby.com/isbn_cover_images/9781337093422/9781337093422_smallCoverImage.gif)
![Prelude to Programming](https://www.bartleby.com/isbn_cover_images/9780133750423/9780133750423_smallCoverImage.jpg)
![Sc Business Data Communications and Networking, T…](https://www.bartleby.com/isbn_cover_images/9781119368830/9781119368830_smallCoverImage.gif)