Re: [csswg-drafts] [css-grid] aspect ratio units needed

@fantasai @jensimmons @rachelandrew 
> So, I was just thinking about this again and the problem is this: I have two columns of different widths (say 100px and 200px), and then one row indicating it wants an aspect ratio of 1:1. How tall is the row?

I've been wondering about that too. How about saying that the aspect ratio of rows is calculated from the size of implicit columns (and vice versa) if they're sized to a `<length-percentage>` or to a `<flex>`, (i.e. something that always resolves to the same size, not `auto`, `min-content`, `max-content`...), or to `auto` otherwise?

Suggested syntax: allow `<number>` as a `<track-size>`, similarly to how we're using `<number>` for aspect ratio in gutters.

```css
container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(3, minmax(1.0, auto));
}
```
You get 3 rows and n columns depending on content. All the columns are the same width, and the height of each row is at least the same as the width of the columns, or more if the content wouldn't fit, with each row growing individually. To get all rows to grow together, change to:

```css
container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(3, minmax(1.0, 1fr));
}
```
If you want to fix the number of columns instead of rows, but keep the same aspect ratio logic:
```css
container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-columns: 1fr;
  grid-auto-rows:  minmax(1.0, auto); /* or minmax(1.0, auto), depending */
}
```



-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1173#issuecomment-362475164 using your GitHub account

Received on Friday, 2 February 2018 03:26:14 UTC