2. First we'll work on the rows. FIGURE 1847 shows that we need three rows to create the layout. 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 Sem should be sufficient to fit the few lines of text with a comfortable amount of space: #container { display: grid; grid-template-rows: auto auto 3. Now we can set up the column tracks. It looks like we'll need only two: one for the main content and one for the Hours sidebar. I've used the minmax() value so I can 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 feels right to me at 16em. Feel free to try other values. #container { display: grid; grid-template-rows: auto auto 4. Next, name the areas in the grid so we can place the items in it easily and efficiently. Use the grid-template-areas property to name the cells in the grid: #container { display: grid; grid-template-rows: auto auto With everything set up, it'll be a breeze to put the content items into their proper places. Create a style rule for each grid item and tell it where to go with grid-area: header { grid-area: banner; }main { grid-area: main;}aside Pretty easy, right? Now would be a good time to save the file and take a look at it in the browser (if you haven't already). The 2.5% margins that we had set on the main element earlier give it some nice breathing room in its area, so let's leave that alone. However, I'd like to remove the right margin and border radius we had set on the aside so it fills the right column. I'm going to just comment them out so that information is still around if I need to use it later: aside { - /* border-top-right-radius: 25px; */ /* margin: 1e
@charset "UTF-8";
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
font-family: Georgia, serif;
font-size: 100%;
background-color: white;
margin: 0;
}
/* 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;
}
/* header styles */
header {
color: white;
background: url(images/croissants_banner.jpg) no-repeat center center;
background-size: cover;
text-align: center;
height: 15em;
}
header p {
font-style: italic;
font-size: 1.2em;
margin-top: -12px;
}
header h1 {
margin-top: 1.5em;
}
/* nav styles */
nav, footer {
font-family: verdana, sans-serif;
background-color: #783F27;
}
nav ul li a{
display:block;
border: 1px solid;
border-radius:25px;
top: 0.5em;
right: 1em;
bottom: 0.5em;
left: 1em;
}
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 {
display: flex;
justify-content: center;
}
nav ul li {
font-size: .8em;
text-transform: uppercase;
letter-spacing: .2em;
}
/* main "products" 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;
margin: 2.5%;
}
h3 {
text-transform: uppercase;
letter-spacing: .2em;
color: #7A0002;
border-top: 1px solid;
border-left: 3px solid;
padding-left: 1em;
margin-top: 2.5em;
}
p.more {
font-family: verdana, sans-serif;
text-transform: uppercase;
font-size: .8em;
clear: left;
}
main img {
float: left;
margin: 0 1em 1em 0;
}
img[src*="bread"] {
-webkit-shape-outside: ellipse(130px 95px at 50% 50%);
shape-outside: ellipse(130px 95px at 50% 50%);
}
img[src*="muffin"] {
margin-left: 50px;
-webkit-shape-outside: circle(125px);
shape-outside: circle(125px);
-webkit-shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);
shape-outside: polygon(0px 0px, 197px 0px, 241px 31px, 241px 68px, 226px 82px, 219px 131px, 250px 142px, 250px 158px, 0px 158px);
}
/* 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%;
}
/* misc styles */
footer {
color: #EADDC4;
text-align: center;
font-size: .8em;
padding: 1em;
}
#award {
position: fixed;
top: 30px;
left: 50px;
}
h2 {
font-family: 'Stint Ultra Expanded', Georgia, serif;
}
.day {
color: #783F27;
font-family: verdana, sans-serif;
font-size: .8em;
text-transform: uppercase;
}
/* CSS Document */
Step by step
Solved in 2 steps
