3. We gave the grid lines around the main area names, so let's use them toplace the main grid item:main {... grid-row: main-start / main-end; grid-column: mainDo you remember that when you name lines around an area *-startand *-end, it creates an implicitly named area *? Because we named thelines according to this syntax, we could also place the main element withgrid-area like this:main {... grid-area: main;}4. Finally, we can put the footer into its place. It starts at the last row gridline and spans back one track. For columns, it starts at the third line andgoes to the last. Here is one way to write those instructions. Can youcome 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 iswide, the layout works fine, but when it is made narrower, the text inthe main element overflows its cell. That's because the 300-pixel heightwe gave that row is not sufficient to hold the text when it breaks ontoadditional lines or is resized larger.5. We can fix that by changing the measurement of the fifth row track toauto. In that way, the height of that row will always be at least bigenough 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 20px [mai}If you reload the page in the browser, the text is always contained in its gridarea, regardless of the width of the window. Everything should fall into placenicely, as shown in FIGURE 16-41.You now have your first grid layout under your belt. This exercise gives youonly a taste of what Grid Layout can do, but we've covered the fundamentalsof setting up a grid and placing items in it. You're off to a great start! EXERCISE 16-5. Placing items on a gridNow that we have the grid set up for the Breads of the World page, we canplace 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 atthe page in a grid-supporting browser at any step along the way. Refer to thefinished layout in FIGURE 18-41 for the final item positions and line numberhints.1-2.main-startmain-start Introducing Breads of the World!main-end-end 3FIGURE 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 byplacing the nav element into the first row of the grid, using the four gridline properties:nav { grid-row-start: 1; grid-row-end: 2; grid-column-sta2. Now place the figures in their positions on the grid. Start by putting thethird figure (#figc) in its place in the far-right column by using theshorthand grid-row and grid-column properties. It goes between the 3rdand 4th row grid lines and extends from the 7th to 8th column lines. Forcolumns, instead of 7 and 8, use the negative value for the last line andspan 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 #fige 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; } #fige { grid-area: 3 / 5

Question

Accepted Answer

Answered: Image /qna-images/answer/66396c93-d074-41b7-8d4b-c71db48af2b8.jpg

mber that when creates an imp ng to this synta: e this: