Setting the minimum, maximum and default length of a grid column / row

Question

I'm aware of the new minmax() function that allows specification of minimum and maximum width for a grid column. When using this function, however, I'm unclear what the "default" width of the column would be, and how to specify it.

Outside of a grid - including in flex layouts - it's possible to specify something like this:

.container {
    width: 25%;
    min-width: 200px;
    max-width: 400px;
}

effectively creating a container that would by default occupy 25% of its parent's width, but never shrink below 200px or grow past 400px.

What's the grid equivalent way of achieving this effect?

Answer 1

Based on your general CSS code sample...

.container {
    width: 25%;
    min-width: 200px;
    max-width: 400px;
}

here's one approach that may work in CSS Grid:

1. Set the width of the first column to a minimum of 200px and a maximum of 400px.
2. Set the width of the second column to a minimum of 75% and a maximum of 1fr.

The 75% on the second column forces the first column to be 25%.

The 1fr enables the second column to consume extra space.

#container {
  display: grid;
  grid-template-columns: minmax(200px, 400px) minmax(75%, 1fr);
  grid-gap: 10px;
  height: 100px;
  border: 1px solid gray;
}

#container > div {
  background-color: lightgreen;
  padding: 5px;
}

<div id="container">
  <div>
    grid item<br> minimum width = 200px<br> maximum width = 400px
  </div>
  <div>
    grid item<br> minimum width = 75%<br> maximum width = 1fr
  </div>
</div>

jsFiddle demo

Notes:

• More columns can be added. They just need to have widths that collectively add up to 75%.
• You may need to deal with an overflow condition, depending on your exact situation.
• There aren't many details about the layout in your question, so I can't be more precise.

Aside from the solution above, I don't believe this effect is possible with CSS Grid.

As far as I can tell, there's no way to say:

The column width must be 25% of the container and never less than 200px or more than 400px.

You can either set the minmax() or the fixed length.

In other words, you can do this:

#container {
  display: grid;
  grid-template-columns: minmax(200px, 400px);
}

... or this:

#container {
  display: grid;
  grid-template-columns: 25%;
}

#container {
  display: grid;
  grid-template-columns: minmax(200px, 400px) 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 100px;
  background-color: #8cffa0;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

<div id="container">
  <div>
    grid item<br> minimum width = 200px<br> maximum width = 400px
  </div>
  <div>
    grid item<br> takes remaining space on the row
  </div>
</div>

jsFiddle demo

Depending on your exact circumstances, setting the container to 25% and min-max to the grid item, may work for you. Something like this:

#container {
  display: grid;
  grid-template-columns: 25%;
}

#container > div {
   min-width: 200px;
   max-width: 400px;
}

Just keep in mind that the first rule sizes the column and the second rule sizes the grid item. So there may be times (especially on wider screens) when the 25% column is wider than the 400px grid item. This would result in a gap.

#container {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 100px;
  background-color: #8cffa0;
}

#container > div:first-child {
  min-width: 200px;
  max-width: 400px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

<div id="container">
  <div>
    grid item
    <br> minimum width = 200px
    <br> maximum width = 400px
  </div>
  <div>
    grid item
    <br> takes remaining space on the row
  </div>
</div>

jsFiddle demo