CODEWITHSUNDEEP
htmlcsscss-grid
user11064874
user11064874

Reputation:

CSS - Prevent div content from resizing parent

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).

Upvotes: 3

Views: 1495

Answers (3)

Dabees
Dabees

Reputation: 504

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>

Upvotes: 0

Andy Hoffman
Andy Hoffman

Reputation: 19109

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>

Upvotes: 3

jleggio
jleggio

Reputation: 1286

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>

Upvotes: -1

Related Questions