JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div class="grid">
  <div class="search y">search and filter: click to expand</div>
  <div class="toolbar r">toolbar: fixed height</div>
  <div class="list g">list: must expand to bottom</div>
  <div class="header b">header: fixed height</div>
  <div class="main p">
    <p>
      main: must expand to bottom.
    </p>
    <p>
      I'm using explicit rows in my grid layout to make this last row expand to the bottom. But since I'm defining an explicit grid-row on .main and .list, I get an empty space at row 2, column 2. How do I remove that?
    </p>
   </div>
</div>

CSS

.grid {
  /* fill view port */
  height: 100vh;
  
  
  display: grid;
  
  /*
    Only define 2 rows. The last one is implicit, so that we
    can define grid-auto-rows for the last one at 100%;
  */
  grid-template-rows: auto 30px;
  grid-auto-rows: 100%;
  
  /* 2 columns, the sidebar is fixed width */
  grid-template-columns: 300px auto;
}

/* horizontal positioning */

/* Left column */
.search, .toolbar, .list { grid-column: 1/2; }

/* Right column */
.header, .main { grid-column: 2/-1; }

/* vertical positioning */
.search, .header { grid-row: 1/2; }
.toolbar { grid-row: 2/3; }

/* Use implicit 3rd line to draw all the way to the bottom*/
.list { grid-row: 3/-1; }
/* Use implicit 4th grid line to expand the row all the way to the bottom */
.main { grid-row: 2/4; }


/* ------------------ other stuff ---------------- */
.header {
  height: 50px;
}
.search {
  z-index: 100;
  cursor: pointer;
}
.search:hover {
  background-color: aqua;
}

/* util colors */
.y { background-color: yellow; }
.r { background-color: red; }
.g { background-color: green; }
.b { background-color: blue; }
.p { background-color: pink; }

JavaScript

var search = document.querySelector('.search');

search.addEventListener('click', function() {
		const { style: { height } } = search;
    if (height === "100px") {
	    search.style.height = "auto";
		} else {
    	search.style.height = "100px";
    }
});