[css-grid] grid-template-width and grid-template-height

The total size of the grid template depends on different things. For example, if all columns have fixed sizes, the template grid is the sum of all columns:

.grid {
  display: grid;
  grid-template-columns: 250px 250px; /* This creates a template 500px wide */
}

If some columns use fr units, the grid will take all available space, so the total width is the same as the element width:

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: repeat(2, 1fr); /* This creates a template with the same width as the .grid element (500px) */
}

Sometimes we want to create a flexible grid, using fr values, but without taking all available space. Let's see the following example:

This is a website where the content takes a maximum width of 1400px. To create this grid, we need two elements, one for the green background and other to distribute the elements:

<style>
.background {
  background-color: #00BD79;
}
.grid {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}
</style>

<div class="background">
  <div class="grid">
    <!-- grid elements here -->
  </div>
</div>

It would be great if this could be done with only one element using the new property grid-template-width to limit the total width of the grid:

<style>
.grid {
  background-color: #00BD79;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-width: min(100%, 1400px); /* Limit the grid total width */
  justify-content: center;  /* To center the grid in the element */
  gap: 20px;
}
</style>

<div class="grid">
    <!-- grid elements here -->
</div>

The grid-template-height property would have the same behavior but applied to the height of the grid.
This new property will be ignored if there's a conflict with the values of grid-template-columns, or grid-template-rows. For example:

.grid {
  display: grid;
  grid-template-columns: 500px 500px; /* The template width is 1000px */
  grid-template-width: 800px /* The template width remains 1000px because it's not possible to shrink the two 500px wide columns */
}

Start with the CSS Grid examples and the proposed grid-template-width and grid-template-height behavior in the issue. Compare the requested sizing and conflict cases, then determine the precise proposal and its interaction with grid-template-columns and grid-template-rows; done means the behavior is sufficiently specified for CSSWG review.