在CSS网格中的所有列上进行拉伸

本文介绍了在CSS网格中的所有列上进行拉伸的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！尽管事实上我已经指定了我希望nav浏览的列，但是如果您可以查看我的代码并指出我的列，我一直无法让我的导航栏完全展开我的列错误，这将是真棒。这是浏览器中的HTML文件的图像 body {margin：0; padding：0;}。container {max-width：960px;宽度：100％;保证金：0汽车;显示：网格; grid-template-columns：4fr 1fr; grid-template-rows：50px auto;}。mainnav {grid-column：1/2;网格行：1/1; background-color：＃5eccc0;}。navul {list-style-type：none;保证金：0; padding：0;}。navli {float：left; text-align：center;}。navli a {display：block; text-decoration：none;} main {grid-column：1/1;网格行：2/2; background-color：＃ffff77;}。sidebar {background-color：＃b200a4;网格列：2/2; grid-row：2/2;} < div类= 容器 > < nav class =mainnav> < ul class =navul> < li class =navli>< a href =index.html>主页< / a>< / li> < li class =navli>< a href =contact.html>联络人< / a>< / li> < li class =navli>< a href =about.html>关于< / a>< / li> < / UL> < / NAV> <主> < h1> Html示例标题< / 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认为sem。 Fusce eget condimentum massa，坐amet convallis erat。在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等份euismod fringilla。 Curabitur坐在amet pharetra nisi。完成交易后，交易所累积折磨。优雅的egestas augue，laoreet tempus ligula。 Morbi pulvinar arcu et lectus tincidunt condimentum。 Mauris在尼古丁的基础上进行了调查。 <峰; br> <峰; br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros。 Sed vestibulum metus eu justo volutpat，nec facilisis lacus tempus。 Nulla在maximus sapien，eget finibus massa。 Phasellus pulvinar iaculis增强rhoncus小条。 Vestibulum vitae massa bibendum，pretium justo ultrices，fermentum turpis。 Vestibulum id scelerisque lacus。在mattis viverra justo，vel suscipit enim egestas ac。 Ut fringilla lobortis nulla，vitae tempus nibh fermentum ac。在faucibus orci luctus et ultrices posuere cubilia Curae中的Vestibulum ante ipsum primis; Phasellus ac urna vitae arcu varius suscipit。 Pellentesque nec nunc ligula。 Sed sollicitudin pretium iaculis。 Aliquam ut ex molestie，vulputate lacus vitae，dapibus lorem。其他相关公司酷刑。 < / p为H. < /主> < div class =sidebar> < h2>侧栏示例< / h2> < UL> < li>清单项目1< / li> < li>列表项目2< / li> < li>列表项目3< / li> < / UL> < / div>< / div> 解决方案实际上，您尚未指定要将nav伸展过来的列。您指定了列行。网格项目做到以下几点： grid-column：1/2 分解为：网格列-start：1 grid-column-end：2 这称为有几种方法可以解决这个问题。其中一个就是调整你的网格 grid-column：1/2 至网格列：1/3 但是，使用显式网格时，您也可以这样做： grid-column：1 / -1 正数整数从网格开始算起。负整数从网格的末端开始计数（ source ）。 body {margin：0; padding：0;}。container {max-width：960px;宽度：100％;保证金：0汽车;显示：网格; grid-template-columns：4fr 1fr; grid-template-rows：50px auto;}。mainnav {grid-column：1 / -1; / *调整（1/2）* /网格行：1/2; / *调整（是1/1）* / background-color：＃5eccc0;}。navul {list-style-type：none;保证金：0; padding：0;}。navli {float：left; text-align：center;}。navli a {display：block; text-decoration：none;} main {grid-column：1/1;网格行：2/2; background-color：＃ffff77;}。sidebar {background-color：＃b200a4;网格列：2/2; grid-row：2/2;} < div类= 容器 > < nav class =mainnav> < ul class =navul> < li class =navli>< a href =index.html>主页< / a>< / li> < li class =navli>< a href =contact.html>联络人< / a>< / li> < li class =navli>< a href =about.html>关于< / a>< / li> < / UL> < / NAV> <主> < h1> Html示例标题< / 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认为sem。 Fusce eget condimentum massa，坐amet convallis erat。在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等份euismod fringilla。 Curabitur坐在amet pharetra nisi。完成交易后，交易所累积折磨。优雅的egestas augue，laoreet tempus ligula。 Morbi pulvinar arcu et lectus tincidunt condimentum。 Mauris在尼古丁的基础上进行了调查。 <峰; br> <峰; br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros。 Sed vestibulum metus eu justo volutpat，nec facilisis lacus tempus。 Nulla在maximus sapien，eget finibus massa。 Phasellus pulvinar iaculis增强rhoncus小条。 Vestibulum vitae massa bibendum，pretium justo ultrices，fermentum turpis。 Vestibulum id scelerisque lacus。在mattis viverra justo，vel suscipit enim egestas ac。 Ut fringilla lobortis nulla，vitae tempus nibh fermentum ac。在faucibus orci luctus et ultrices posuere cubilia Curae中的Vestibulum ante ipsum primis; Phasellus ac urna vitae arcu varius suscipit。 Pellentesque nec nunc ligula。 Sed sollicitudin pretium iaculis。 Aliquam ut ex molestie，vulputate lacus vitae，dapibus lorem。其他相关公司酷刑。 < / p为H. < /主> < div class =sidebar> < h2>侧栏示例< / h2> < UL> < li>清单项目1< / li> < li>列表项目2< / li> < li>列表项目3< / li> < / UL> < / div>< / div> $ b I've been having trouble getting my nav to stretch across my columns completely, despite the fact that I've specified what columns I wanted the nav to stretch over, if you could take a look at my code and point out my error that would be awesome.Here's an image of the HTML file in browserbody { 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 / 2; grid-row: 1 / 1; 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> 解决方案 Actually, you have not specified the columns you want the nav to stretch over.You have specified the column lines.When you tell a grid item to do the following:grid-column: 1 / 2That breaks down to this:grid-column-start: 1grid-column-end: 2This is called line-based placement and it defines boundary lines for the columns.In this case, you're telling the grid item to extend from grid column line 1 to grid column line 2. That covers one column.Except in 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 grid column lines.In fact, in every grid the number of column / row lines is equal to the number of columns / rows + 1, because the last column / row has an extra (final) line.Firefox offers a useful tool for seeing this.In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid.More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layoutsThere are several ways to solve this problem.One would be to adjust your grid-column rule from:grid-column: 1 / 2togrid-column: 1 / 3But, when working with explicit grids, you could also do this:grid-column: 1 / -1Positive integers begin the count from the start of the grid.Negative integers begin the count from 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; /* adjustment (was 1 / 2) */ grid-row: 1 / 2; /* adjustment (was 1 / 1) */ 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> 这篇关于在CSS网格中的所有列上进行拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！