Black Goose Bakery Grid Menu News About Contact Introducing: Breads of the World! 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. 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. 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. Providing you with fresh, unique breads is one of the things that makes Black Goose Bakery proud. Black Goose Bakery | Seekonk, MA Monday – Friday: 5am to 3pm | Saturday & Sunday: 6am to 4pm
<!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%;
/* display as grid */
display: grid;
/* 5 grid rows heights */
grid-template-rows: 3em 20px [main-start] 150px 300px 5em [main-end];
grid-template-columns: [main-start] 1fr [main-end] repeat(3, 20px 150px);
}
/* 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>
![3. We gave the grid lines around the main area names, so let's use them to
place the main grid item:
main { grid-row: main-start / main-end; grid-column: main
Do you remember that when you name lines around an area *-start
and *-end, it creates an implicitly named area +? Because we named the
lines according to this syntax, we could also place the main element with
grid-area like this:
main {. grid-area: main;
4. Finally, we can 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. Can you
come up with others that achieve the same result?
footer {- grid-row: 5 / 6; grid-column: 3 / -1;
Save your file and look at it in the browser. You may spot a problem, de-
pending 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. 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.
5. We can fix that 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 the content. The min-content value would work as well,
but auto is always the first value to try:
#layout { display: grid; grid-template-rows: 3em 2epx [mai
}
If you reload the page in the browser, the text is always contained in its grid
area, regardless of the width of the window. Everything should fall into place
nicely, as shown in FIGURE 16-41.
You now have your first grid layout under your belt. This exercise gives you
only a taste of what Grid Layout can do, but we've covered the fundamentals
of setting up a grid and placing items in it. You're off to a great start!](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fcf1684af-baee-49aa-ab2a-04e1825ffff2%2Fc5a8ce54-584f-4efc-9a58-2288be3220a0%2Fiuzjzo_processed.png&w=3840&q=75)
![EXERCISE 16-5. Placing items on a grid
Now that we have the grid set up for the Breads of the World page, we can
place items into the correct grid areas by using line numbers and names.
I'm going to go through them quickly, but feel free to save the file and look at
the page in a grid-supporting browser at any step along the way. Refer to the
finished layout in FIGURE 16-41 for the final item positions and line number
hints.
main-start
2.
main-start
Introducting Rrends of the Worid
ndthe wone
be O
main-end
FIGURE 16-41. The final Breads of the World grid layout.
1. Open grid.html in your text editor if it isn't open already. We'll start by
placing the nav element into the first row of the grid, using the four grid
line properties:
nav { grid-row-start: 1; grid-row-end: 2; grid-column-sta
2. Now place the figures in their positions on the grid. Start by putting the
third figure (#figC) in its place in the far-right column by using the
shorthand grid-row and grid-column properties. It goes between the 3rd
and 4th row grid lines and extends from the 7th to 8th column lines. For
columns, instead of 7 and 8, use the negative value for the last line and
span it one space to the left to get to the starting point:
#figc { grid-row: 3 / 4; grid-column: span 1 / -1;}
Now position the #figa and #figB elements by using the grid-area prop-
erty with line values. Remember that the values go in the order top, left.
bottom, right (counterclockwise around the area).
#figa { grid-area: 3 / 3/ 4 / 4;}#figs { grid-area: 3 / 5](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fcf1684af-baee-49aa-ab2a-04e1825ffff2%2Fc5a8ce54-584f-4efc-9a58-2288be3220a0%2Fvx4q3o_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 2 steps
![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)