在响应式网格布局中将列强制为空 [英] Forcing a column to be empty in a responsive grid layout

问题描述

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

I've a grid of items and the first item spans rows 1 and 2 (for a menu). I'd like to keep the grid under this area empty, but because I don't know how many items will be displayed I'm using auto-fit and as the page reflows this area is filled.

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

I guess I could make a wrapper with display flex and then split the search element from the grid items, but I'd be interested in knowing how to force certain areas to be empty when the grid is responsive. I'd say there's a 95% chance I'm doing something wrong, but I'm not great with grid and can't find an answer

.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>

推荐答案

一种技巧是通过定义大量行来使第一个元素跨越所有第一列，但是您必须对为了实现这一点，例如消除垂直间隙和grid-auto-rows

On trick is to make the first element to span all the first column by defining a big number of rows but you have to do slight changes to the grid definition in order to achieve this like removing the vertical gap and the 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可使布局更有趣:

Not relevant to the question but adding position:sticky make the layout more intresting:

.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;
}

<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>

这篇关于在响应式网格布局中将列强制为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！