[csswg-drafts] [feature-request] grid-template-width and grid-template-height (#9182)

oscarotero has just created a new issue for https://github.com/w3c/csswg-drafts:

== [feature-request] 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:

```css
.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:

```css
.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:

![imaxe](https://github.com/w3c/csswg-drafts/assets/377873/28e27ea9-e77a-43dc-8766-8a3df7394d84)

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:

```html
<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:

```html
<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.
In case of conflict with the values of grid-template-columns, or grid-template-rows, these values always win. For example:

```css
.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 */
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9182 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 11 August 2023 18:26:29 UTC