Tracks of CSS grid not shrinking when other tracks grow

Question

In the following code, why do the grid track cells not dynamically shrink when the other cells are enlarged?

In the snippet, if you hover over any track section, that cell grows to 75% of the viewpoint, however rather than the other sections of the grid shrinking to accommodate the newly sized section, they all stay at their original size causing the cells to expand out beyond the size of the grid.

I would like to create sections of the grid that can be resized by hovering over them with the other sections of the grid shrinking to accommodate the new size.

Is there a way to do this, and more importantly, why does my code not work?

.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}

<div class="grid--container">
  <div class="track--section">section1</div>
  <div class="track--section">section2</div>
  <div class="track--section">section3</div>
  <div class="track--section">section4</div>
</div>

the main issue is basically to understand the difference between `minmax(0,1fr)` and `1fr` and why the first one is not working — Temani Afif, Apr 18 '19 at 08:38

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Because you have 1fr in both your row and column definitions, the horizontal and vertical space is constrained - so they will be equally shared by the grid items. Try changing this to auto for both rows and columns and you can see things working just about okay, but not perfect yet - note that there are whitespaces around the hovered grid items:

.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto auto; /* changed */
  grid-template-rows: auto auto; /* changed */
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}

<div class="grid--container">
  <div class="track--section">section1</div>
  <div class="track--section">section2</div>
  <div class="track--section">section3</div>
  <div class="track--section">section4</div>
</div>

Solution

You can try this:

a 2 column layout using grid-template-columns: 1fr 1fr
implicit rows for this using grid-auto-rows: 1fr

See demo below:

.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  grid-auto-rows: 1fr; /* implicit rows */
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}

<div class="grid--container">
  <div class="track--section">section1</div>
  <div class="track--section">section2</div>
  <div class="track--section">section3</div>
  <div class="track--section">section4</div>
</div>

You can read more about Explicit and Implicit Grids here: CSS Grid unwanted column added automatically.

well that certainly seems like what I was looking for. I am still having a hard time wrapping my head around why it works. I am going to have to do some more reading on this. Thanks for your help!!! — Occam, Apr 18 '19 at 04:28

Tracks of CSS grid not shrinking when other tracks grow

1 Answers1

Solution