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>

Improve this question
2
  • 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. Commented May 2, 2019 at 19:18
  • the built in functionality has never worked for me on FF so it makes it more difficult, just comes up blank. Commented May 3, 2019 at 13:31

1 Answer 1

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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 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 ;)
Ah yeah, i did see the 300 line number while inspecting it, makes sense, thanks

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.