0

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.

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>
connexo
  • 53,704
  • 14
  • 91
  • 128
NickW
  • 1,207
  • 1
  • 12
  • 52
  • 1
    Links to external code sites are discouraged on StackOverflow unless SO's built-in snippet functionality is not sufficient. Please always try to make your code example work right here first. – connexo May 02 '19 at 19:18
  • the built in functionality has never worked for me on FF so it makes it more difficult, just comes up blank. – NickW May 03 '19 at 13:31

1 Answers1

3

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>

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • That first example is exactly what I'm looking for outcome wise, thanks. So setting an element to take up 300 theoretical rows it doesn't actually draw them, it just reserves that space? Funnily enough I was considering making the search element sticky, so thanks! Didn't have time to fully look at the answer last night, but great response, appreciated – NickW May 03 '19 at 13:55
  • @NickW it actually draws the 300 rows, that why I removed the gap and the auto-rows to have those 300 rows empty without height and without gaps. So only the height of the column where I will put the other element will increase. add a small row-gap and inspect the element and you will see those phamtom rows ;) – Temani Afif May 03 '19 at 14:00
  • Ah yeah, i did see the 300 line number while inspecting it, makes sense, thanks – NickW May 03 '19 at 14:28