Chromium Code Reviews Chromium Code Reviews
Issue 1490093003:
[css-grid] Fix items' height computation in indefinite grids with fr (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 | |
| 3 <link href="resources/grid.css" rel="stylesheet"> | |
| 4 <style> | |
| 5 .frGrid { | |
| 6 grid: 1fr / 1fr; | |
| 7 font: 50px/1 Ahem; | |
| 8 border: 50px solid magenta; | |
| 9 width: 300px; | |
|
Manuel Rego
2015/12/03 09:24:43
Wouldn't be nice to have a fixed height too,
to ch
svillar
2015/12/03 09:35:12
We cannot do that because the problem appears when
Manuel Rego
2015/12/03 09:44:17
Ok, I didn't realize about that sorry.
| |
| 10 } | |
| 11 | |
| 12 .item { | |
| 13 border: 50px solid rgba(0, 255, 250, 0.5); | |
| 14 } | |
| 15 | |
| 16 .borderMargin { | |
| 17 border: 20px solid blue; | |
| 18 margin: 30px; | |
| 19 width: -webkit-fit-content; | |
|
Manuel Rego
2015/12/03 09:24:43
Maybe it's better to use "fit-content" class alrea
svillar
2015/12/03 09:35:12
Acknowledged.
| |
| 20 } | |
| 21 | |
| 22 .frRowsGrid { | |
| 23 grid-auto-columns: 100px; | |
| 24 grid-auto-rows: minmax(0,1fr); | |
|
Manuel Rego
2015/12/03 09:24:43
Do you really need to use "minmax(0, 1fr);" ?
Als
svillar
2015/12/03 09:35:12
Why do you prefer grid-template-* over grid-auto-*
Manuel Rego
2015/12/03 09:44:17
Not preference, it was just an extra comment but a
| |
| 25 } | |
| 26 | |
| 27 .frColsGrid { | |
| 28 grid-auto-columns: minmax(0,1fr); | |
|
Manuel Rego
2015/12/03 09:24:43
Ditto.
| |
| 29 grid-auto-rows: 100px; | |
| 30 } | |
| 31 | |
| 32 span { | |
| 33 background: gray; | |
|
Manuel Rego
2015/12/03 09:24:43
.grid has already a grey background,
maybe use a d
svillar
2015/12/03 09:35:12
Acknowledged.
| |
| 34 border: 10px solid; | |
| 35 } | |
| 36 | |
| 37 x { display:block; height:40px; width:40px; } | |
|
Manuel Rego
2015/12/03 09:24:43
Why not use a <div>?
You could remove "display: bl
svillar
2015/12/03 09:35:12
Acknowledged.
| |
| 38 | |
| 39 </style> | |
| 40 <script src="../../resources/testharness.js"></script> | |
| 41 <script src="../../resources/testharnessreport.js"></script> | |
| 42 <script src="../../resources/check-layout-th.js"></script> | |
| 43 | |
| 44 <body onload="checkLayout('.grid')"> | |
| 45 <div id=log></div> | |
| 46 | |
| 47 <div class="grid frGrid" data-expected-width="400" data-expected-height="250"> | |
| 48 <div class="item" data-expected-width="300" data-expected-height="150">X</di v> | |
| 49 </div> | |
| 50 | |
| 51 <div class="grid borderMargin frRowsGrid" data-expected-width="140" data-expecte d-height="100"> | |
| 52 <span data-expected-width="100" data-expected-height="60"><x></x></span> | |
| 53 </div> | |
| 54 | |
| 55 <div class="grid borderMargin frColsGrid" data-expected-width="100" data-expecte d-height="140"> | |
| 56 <span data-expected-width="60" data-expected-height="100"><x></x></span> | |
| 57 </div> | |
| 58 | |
| 59 </body> | |
| OLD | NEW |
