CSS - Prevent div content from resizing parent

Question

I have a grid of boxes that I want to display some content on. However, I would also like for all of them to be the same size (scaled according to window size).

I have the following code:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-block {
  border: 1px solid;
  padding: 16% 0 16%;
  margin: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-block">1</div>
  <div class="grid-block">2</div>
  <div class="grid-block">3</div>
  <div class="grid-block">4</div>
  <div class="grid-block">5</div>
  <div class="grid-block">6</div>
  <div class="grid-block">7</div>
  <div class="grid-block">8</div>
  <div class="grid-block">9</div>
</div>

Here, if I replace any of the numbers in my "grid-block" divs with some text, the whole box and all boxes along the same column get resized.

I would like to force all boxes to be the same size (scaled as the window grows or shrinks).

Andy Hoffman · Accepted Answer · 2019-02-15T01:50:22.527

From MDN:

The fr unit as a unit which represents a fraction of the available space in the grid container.

Swapping auto with frs solves your problem.

Edit: For the height to remain equal (but not fixed), I'm using the minmax function. I'm telling the grid that each cell must be at least its default size of auto and, at most, 1 equal fraction of the grid. The result is what you're after. If one cell contains a lot of text and grows quite a bit, the other cells will be fractionally equivalent to whatever the largest cell has grown to.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(auto, 1fr));
  padding: 10px;
}

.grid-block {
  border: 1px solid;
  padding: 16% 0 16%;
  margin: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-block">1</div>
  <div class="grid-block">Lots of text in here</div>
  <div class="grid-block">3</div>
  <div class="grid-block">Lots and lots and lots and lots of text in here as well</div>
  <div class="grid-block">5</div>
  <div class="grid-block">6</div>
  <div class="grid-block">7</div>
  <div class="grid-block">8</div>
  <div class="grid-block">9</div>
</div>

Dabees · Answer 2 · 2019-02-15T01:54:47.490

You just need to define width and height for the grid-block or the boxes like this

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-block {
  border: 1px solid;
  /*here*/
  width:300px;
  height:70px;
  padding: 16% 0 16%;
  margin: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-block">Some random textSome random text</div>
  <div class="grid-block">Some random textSome random textSome random textSome random text</div>
  <div class="grid-block">Some random textSome random text</div>
  <div class="grid-block">Some random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random text</div>
  <div class="grid-block">5</div>
  <div class="grid-block">6</div>
  <div class="grid-block">7</div>
  <div class="grid-block">8</div>
  <div class="grid-block">9</div>
</div>

score -1 · Answer 3 · answered Feb 15 '19 at 01:26

You can use the fr unit instead of auto for your grid-template-columns

Learn more about the FR unit HERE!

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
}

.grid-block {
  border: 1px solid;
  padding: 16% 0 16%;
  margin: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-block">1asdfasdfsadasdfa asdfas asd a adsa</div>
  <div class="grid-block">2</div>
  <div class="grid-block">3</div>
  <div class="grid-block">4</div>
  <div class="grid-block">5</div>
  <div class="grid-block">6</div>
  <div class="grid-block">7</div>
  <div class="grid-block">8</div>
  <div class="grid-block">9</div>
</div>

Yes, this does the trick for width... Is there a similar way to control the height so all boxes are also the same height? — , Feb 15 '19 at 01:36

CSS - Prevent div content from resizing parent

3 Answers3