CODEWITHSUNDEEP
csscss-grid
NickW
NickW

Reputation: 1343

Forcing a column to be empty in a responsive grid layout

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>

Upvotes: 0

Views: 2733

Answers (1)

Temani Afif
Temani Afif

Reputation: 272842

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>

Upvotes: 4

Related Questions