Prevent grid items from expanding when content is added

Question

I'm trying to create a layout where the screen is divided into some number of equally-sized cells. When I fill one of the cells with content, it stretches to be larger than the other cells, even though the content is much smaller than the cell itself.

Why is the cell stretching despite it being plenty big to hold its content? How can I prevent it from resizing?

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #880022;
}

#content {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
}

#content2 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  height: 100%;
  background-color: #ff00ff;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  grid-gap: 2px 2px;
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

<div id="content">
  <div id="grid">
    <div class="tile"><span>test</span></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

Michael Benjamin · Accepted Answer · 2018-03-05T22:01:43.847

You're setting the column and row sizes to auto. This means they will be sized based on their content. Instead, use fr units, which use the free space in the container.

#content {
  display: grid;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
  height: 100vh;
  background-color: #880022;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;     /* adjustment */
  grid-template-columns: 1fr 1fr;  /* adjustment */
  grid-gap: 2px;
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.tile span {
  font-size: 2em;
}

body {
  margin: 0;
}

<div id="content">
  <div id="grid">
    <div class="tile"><span>test</span></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

jsFiddle demo

dippas · Answer 2 · 2018-03-05T21:58:08.103

You have a lot of extra markup, here is a simplified version, the trick is using fr unit instead of auto and you can use repeat()

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #802;
}

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(80px, 1fr));
  grid-gap: 2px;
  padding: 20px;
  box-sizing: border-box;
  height: 100vh
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

<div id="grid">
  <div class="tile"><span>test</span></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

score 0 · Answer 3 · answered Mar 05 '18 at 21:51

One solution would be to give line-height: 0 to your .tile elements. This will ensure that the text doesn't take up any space, though will limit you to only having one line of text per square:

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #880022;
}

#content {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
}

#content2 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  height: 100%;
  background-color: #ff00ff;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  grid-gap: 2px 2px;
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

<!DOCTYPE html>
<html>

<body>
  <div id="content">
    <div id="grid">
      <div class="tile"><span>test</span></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
    </div>
  </div>
</body>

</html>

However, in my opinion, the better solution would be to set grid-auto-rows: 1fr on #grid, which instructs each of the rows to take up as much height as the tallest row:

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #880022;
}

#content {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
}

#content2 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  height: 100%;
  background-color: #ff00ff;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  grid-gap: 2px 2px;
  grid-auto-rows: 1fr;
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

<!DOCTYPE html>
<html>

<body>
  <div id="content">
    <div id="grid">
      <div class="tile"><span>test</span></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
    </div>
  </div>
</body>

</html>

Would be interested to know why this was down-voted considering it provides two different solutions to the problem. — Obsidian Age, Mar 05 '18 at 22:00

score 0 · Answer 4 · answered Mar 05 '18 at 22:31

0

Try

max-width:something px; max-height:something px;

inside #grid.

answered Mar 05 '18 at 22:31

A J

1,439
4
25
42

Prevent grid items from expanding when content is added

4 Answers4

jsFiddle demo