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>
![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)
Step by step
Solved in 4 steps with 6 images
