Make a CSS Grid fit the minimum amount of space

Question

I have something like this :

.row {
  width: 300px;
  border: 1px solid black;
  display: flex;
}

.otherstuff {
  flex-grow: 1;
}

.grid {
  display: grid;
  grid-auto-flow: column;
  gap: 10px 10px;
}

.cell {
  border: 1px solid blue;
}

<div class='row'>
  <div class='stuff'>Stuff</div>
  <div class='otherstuff'>
    <div class='grid'>
      <div class='cell'>Cell 1</div>
      <div class='cell'>Cell 2</div>
    </div>
  </div>
</div>

I would like the grid to take up only the minimal amount of space required, and not to stretch out. I've read this thread and saw that it was possible with grid-template-columns and auto values, but is there a way to do it without knowing the number of children in advance ?

Thank you.

Aderbal Farias · Accepted Answer · 2019-04-25T13:36:24.840

10

You can use grid-auto-columns: min-content or grid-auto-columns: max-content, this property will affect only columns with the size not set.

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.

.row {
  width: 300px;
  border: 1px solid black;
  display: flex;
}

.otherstuff {
  flex-grow: 1;
}

.grid {
  display: grid;
  grid-auto-flow: column;
  gap: 10px 10px;
  grid-auto-columns: max-content;
}

.cell {
  border: 1px solid blue;
}

<div class='row'>
  <div class='stuff'>Stuff</div>
  <div class='otherstuff'>
    <div class='grid'>
      <div class='cell'>Cell 1</div>
      <div class='cell'>Cell 2</div>
    </div>
  </div>
</div>

edited Apr 25 '19 at 13:36

answered Apr 25 '19 at 10:56

Aderbal Farias

989
10
24

Nop, that makes it too small. – ostrebler Apr 25 '19 at 10:58
1

so, instead of `grid-auto-columns: min-content` you have to use `grid-auto-columns: max-content` as you can see I have updated my answer – Aderbal Farias Apr 25 '19 at 11:07

score 6 · Answer 2 · answered Apr 25 '19 at 10:49

6

You can use inline-grid - see demo below:

.row {
  width: 300px;
  border: 1px solid black;
  display: flex;
}

.otherstuff {
  flex-grow: 1;
}

.grid {
  display: inline-grid; /* changed */
  grid-auto-flow: column;
  gap: 10px 10px;
}

.cell {
  border: 1px solid blue;
}

<div class='row'>
  <div class='stuff'>Stuff</div>
  <div class='otherstuff'>
    <div class='grid'>
      <div class='cell'>Cell 1</div>
      <div class='cell'>Cell 2</div>
    </div>
  </div>
</div>

answered Apr 25 '19 at 10:49

kukkuz

41,512
6
59
95

Well, that was a quick fix. Thank you ! (I need to wait 9 minutes before accepting your answer) – ostrebler Apr 25 '19 at 10:50
@Strebler "*and saw that it was possible with grid-template-columns and auto values, but is there a way to do it without knowing the number of children in advance*" => you can use `grid-auto-columns: auto` to specify *auto* on all columns without specifying `grid-template-columns` (that will be your *implicit grid*)... – kukkuz Apr 25 '19 at 10:52
@Strebler even if you specify *auto* it stretches as you have `flex-grow` on the wrapper... – kukkuz Apr 25 '19 at 10:54
1

Yep, `grid-auto-columns` doesn't work because of that. I'll stick with `inline-grid`. – ostrebler Apr 25 '19 at 10:56

score 2 · Answer 3 · edited Apr 25 '19 at 13:14

2

Do the flex-grow: 0 in otherstuff class. See below:

.row {
  width: 300px;
  border: 1px solid red;
  display: flex;
}

.otherstuff {
  flex-grow: 0;
}

.grid {
  display: grid;
  grid-auto-flow: column;
  gap: 10px 10px;
}

.cell {
  border: 1px solid blue;
}

<div class='row'>
  <div class='stuff'>Stuff</div>
  <div class='otherstuff'>
    <div class='grid'>
      <div class='cell'>Cell 1</div>
      <div class='cell'>Cell 2</div>
    </div>
  </div>
</div>

edited Apr 25 '19 at 13:14

Vadim Ovchinnikov

13,327
5
62
90

answered Apr 25 '19 at 10:50

jitu thakur

740
3
8

Thanks, but I would like to do it without changing that. `inline-grid` did the trick. – ostrebler Apr 25 '19 at 10:52

Make a CSS Grid fit the minimum amount of space

3 Answers3