grid-template-columns不适用于项目列表

Question

我正在尝试使用网格布局实现一个列表组件，该列表组件具有一些用于过滤的子组件，等等。问题是，即使我仅在grid-template-columns规则中声明了两个，该项目也被压入了第三列。 。

 .container { display: grid; margin: 50px; width: calc(100% - 100px); place-items: stretch; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-template-areas: "dropdown dropdown" "filter ." "filter ." "breaker breaker"; } .dropdown { grid-area: dropdown; background-color: red; } .filter { grid-area: filter; background-color: green; } .breaker { grid-area: breaker; background-color: blue; } .item { background-color: orange; } .pagination { grid-column: 1 / end; background-color: yellow; } 

 <div class="container"> <div class="dropdown">Dropdown </div> <div class="filter">Filter </div> <div class="breaker">Breaker </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="pagination">Pagination </div> </div> 

JSFiddle： https ://jsfiddle.net/c0y1bmza/7/

Answer 1

您正在使用grid-column: 1 / end; 而且您没有定义任何称为end区域，因此您要在隐式网格中创建一个新列，使其具有3列（显式定义2列，隐式1列）

使用-1代替：

如果给定一个负整数，则从显式grid 的末端开始倒数 。 ^参考

 .container { display: grid; margin: 50px; width: calc(100% - 100px); place-items: stretch; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-template-areas: "dropdown dropdown" "filter ." "filter ." "breaker breaker"; } .dropdown { grid-area: dropdown; background-color: red; } .filter { grid-area: filter; background-color: green; } .breaker { grid-area: breaker; background-color: blue; } .item { background-color: orange; } .pagination { grid-column: 1 / -1; background-color: yellow; } 

 <div class="container"> <div class="dropdown">Dropdown </div> <div class="filter">Filter </div> <div class="breaker">Breaker </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="pagination">Pagination </div> </div> 

或在这种情况下的breaker-end （或drowpdown-end ）：

 .container { display: grid; margin: 50px; width: calc(100% - 100px); place-items: stretch; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-template-areas: "dropdown dropdown" "filter ." "filter ." "breaker breaker"; } .dropdown { grid-area: dropdown; background-color: red; } .filter { grid-area: filter; background-color: green; } .breaker { grid-area: breaker; background-color: blue; } .item { background-color: orange; } .pagination { grid-column: 1 / breaker-end; background-color: yellow; } 

 <div class="container"> <div class="dropdown">Dropdown </div> <div class="filter">Filter </div> <div class="breaker">Breaker </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="item">Item </div> <div class="pagination">Pagination </div> </div> 

grid-template-areas属性从模板中的命名网格区域创建隐式命名线。 对于每个命名网格区域foo ，将创建四个隐式命名行：两个命名foo-start ，命名命名网格区域的row-start和column-start行，两个命名foo-end ，命名row-end和column -命名网格区域的末端线。 ^参考