Make a CSS Grid fit the minimum amount of space

Related searches

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>

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>

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`, .grid { display: grid; /* define the number of grid columns So we need to start by specifying a minimum width for the columns, making sure they don't get auto-fit FITS the CURRENTLY AVAILABLE columns into the space by� auto-fit behavior: “make whatever columns you have fit into the available space. Expand them as much as you need to fit the row size. Empty columns must not occupy any space. Put that space to better use by expanding the filled (as in: filled with content/grid items) columns to fit the available row space.”

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>

grid-auto-columns, The grid-auto-columns CSS property specifies the size of an grid-auto-columns : min-content; or by the auto-placement algorithm creating additional columns. 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values Each < flex> -sized track takes a share of the remaining space in� If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. The user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage. <flex> A non

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>

grid-template-rows, The grid-template-rows CSS property defines the line names and track grid- template-rows: [linename1 linename2] 100px repeat(auto-fit, and increase the final size of the track by the minimum amount that Each <flex> -sized track takes a share of the remaining space in proportion to its flex factor. grid-row-gap: Sets the size of the gap between the rows in a grid layout. 0 is the default value : grid-column-gap: Sets the size of the gap between the columns in a grid layout. 0 is the default value: Play it »

How to Use minmax() CSS Grid, It makes it possible to define the size of a grid track as a minimum to maximum The min value has to be smaller than the max , otherwise max gets first column ranges from 100px to 200px, based on the available space. The function can be used as a track size in CSS Grid properties, where the maximum size is defined by max-content and the minimum size by auto, which is calculated similar to auto (i.e., minmax (auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.

Becoming a CSS Grid Ninja!. These days, most developers know , In this post I will try to cover all these parts of CSS Grid. if you use the value min -content, the column will take the minimal space according to except for when you have less than the maximum amount of items that can fit in� We can use another grid function to make the value a minimum, with any spare space distributed across all of the tracks. The minmax() function takes a minimum and a maximum size. With a minimum of 200px and a max of 1fr, we get as many 200px tracks as will fit and because the max is 1fr, which we already know will share out the space evenly, the extra is distributed across the tracks.

Grid Track: This is the space between adjacent lines. Each grid track has a sizing function which controls the width or height. Grid Cell: This is the intersection of a grid row and column. This is the smallest part of the grid. Grid Areas: This the space used to lay out one or more grid items.

Comments
  • Nop, that makes it too small.
  • 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
  • Well, that was a quick fix. Thank you ! (I need to wait 9 minutes before accepting your answer)
  • @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)...
  • @Strebler even if you specify auto it stretches as you have flex-grow on the wrapper...
  • Yep, grid-auto-columns doesn't work because of that. I'll stick with inline-grid.
  • Thanks, but I would like to do it without changing that. inline-grid did the trick.