时间戳

首页 > 解决方案 > grid-template-columns 不适用于项目列表

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

问题描述

我正在尝试使用网格布局实现一个列表组件，它有一些用于过滤的子组件等。问题是，即使我在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/

标签： csscss-grid

解决方案

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

改用-1：

如果给定一个负整数，则相反，它从显式网格的结束边缘开始反向计数。参考

.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，命名命名网格区域的行开始和列开始行，以及两个命名foo-end，命名行结束和列- 命名网格区域的结束线。参考

推荐阅读