I'm having trouble getting my navigator to stretch out completely on my columns, even though I indicated which columns I want the navigation to stretch out , if you could take a look in my code and point out my error, which would be awesome.
In fact, you did not specify the columns that you want the navigation to stretch out.
You specified column rows .
When you indicate the following to the grid element:
grid-column: 1 / 2
It breaks:
grid-column-start: 1 grid-column-end: 2
This is called linear placement and defines boundary lines for columns.
In this case, you pass the grid element the extension from the row of the column of grid 1 to the row of the column of row 2. This covers one column.
Except for your grid, there are two columns.
.container { display: grid; grid-template-columns: 4fr 1fr; }
Keep in mind that in a two-column grid there are three rows of grid columns.
In fact, in each grid, the number of rows of a column / row is equal to the number of columns / rows + 1, because the last column / row has an additional (final) row.
Firefox offers a useful tool to view this.
In Firefox dev tools, when you check the grid container, the CSS declaration has a tiny grid icon. When you click on it, the outline of your grid is displayed.
More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
There are several ways to solve this problem.
You could configure your grid-column rule:
grid-column: 1 / 2
to
grid-column: 1 / 3
But, when working with explicit grids , you can also do this:
grid-column: 1 / -1
Positive integers start at the beginning of the grid.
Negative integers start at the end of the grid ( source ).
body { margin: 0; padding: 0; } .container { max-width: 960px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 4fr 1fr; grid-template-rows: 50px auto; } .mainnav { grid-column: 1 / -1; grid-row: 1 / 2; background-color: #5eccc0; } .navul { list-style-type: none; margin: 0; padding: 0; } .navli { float: left; text-align: center; } .navli a { display: block; text-decoration: none; } main { grid-column: 1 / 1; grid-row: 2 / 2; background-color: #ffff77; } .sidebar { background-color: #b200a4; grid-column: 2 / 2; grid-row: 2 / 2; }
<div class="container"> <nav class="mainnav"> <ul class="navul"> <li class="navli"><a href="index.html">Home</a></li> <li class="navli"><a href="contact.html">Contact</a></li> <li class="navli"><a href="about.html">About</a></li> </ul> </nav> <main> <h1>Html Example Header</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi. <br> <br> Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit. <br> <br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor. </p> </main> <div class="sidebar"> <h2>Sidebar Example</h2> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div> </div>