Question

我有一个项目网格，第一个项目跨越第1行和第2行（用于菜单）。我想使该区域下的网格保持空白，但是由于我不知道将显示多少项目，因此我正在使用自动调整功能，并且在页面重排时该区域已被填充。

我想我可以用display flex制成包装材料，然后从网格项目中拆分搜索元素，但是我想知道如何在网格响应时强制某些区域为空。我会说我有95％的机会做错了事，但我对网格并不满意，无法找到答案

.grid {
  display: grid;
  grid-template-columns: 5rem repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
  grid-auto-rows: 10rem;
  grid-template-areas: "search" "search";
  width: 95%;
  margin: 0 auto;
}

.search {
  grid-area: search;
}

.item {
  display: flex;
  padding: 1rem;
  justify-content: center;
  background: lightblue;
}

<div class="grid">
  <div class="item item-1 search">Search</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
  <div class="item item-7">Item 7</div>
  <div class="item item-8">Item 8</div>
  <div class="item item-9">Item 9</div>
</div>

Answer 1

一种技巧是通过定义大量的行来使第一个元素跨越所有第一列，但是您必须对网格定义做一些细微的更改才能实现这一点，例如消除垂直间隙和{{ }}

grid-auto-rows

.grid {
  display: grid;
  grid-template-columns: 5rem repeat(auto-fit, minmax(20rem, 1fr));
  grid-column-gap: 1rem; /* Only column gap here */
  width: 95%;
  margin: 0 auto;
}

.item {
  display: flex;
  padding: 1rem;
  justify-content: center;
  background: lightblue;
  height:10rem; /*to replace the auto-row*/
  margin-bottom:1rem; /* To replace the gap*/
}


.search {
  grid-column: 1;
  grid-row: 1/300; /* big number here */
  height:calc(2*10rem + 1rem); /* consider one gap in the total height*/
}

* {
  box-sizing:border-box;
}

与该问题无关，但添加<div class="grid"> <div class="item item-1 search">Search</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> <div class="item item-4">Item 4</div> <div class="item item-5">Item 5</div> <div class="item item-6">Item 6</div> <div class="item item-7">Item 7</div> <div class="item item-8">Item 8</div> <div class="item item-9">Item 9</div> </div>会使布局更有趣：

position:sticky

.grid {
  display: grid;
  grid-template-columns: 5rem repeat(auto-fit, minmax(20rem, 1fr));
  grid-column-gap: 1rem; /* Only column gap here */
  width: 95%;
  margin: 0 auto;
}

.item {
  display: flex;
  padding: 1rem;
  justify-content: center;
  background: lightblue;
  height:10rem; /*to replace the auto-row*/
  margin-bottom:1rem; /* To replace the gap*/
}


.search {
  grid-column: 1;
  grid-row: 1/300; /* big number here */
  height:calc(2*10rem + 1rem); /* consider one gap in the total height*/
  position:sticky;
  top:0;
}

* {
  box-sizing:border-box;
}

在响应式网格布局中将列强制为空

1 个答案: