| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style type="text/css"> |
| #grid-1 { |
| grid-template-columns: 1fr; |
| } |
| |
| #grid-2 { |
| grid-template-columns: auto; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Description</h1> |
| <p>Flex and content sized column should use all the available width and you should not see the grid background (grey at the end).</p> |
| <h1>Grid 1 flex column</h1> |
| <div id="grid-1" class="grid"> |
| <div class="firstRowFirstColumn">grid item</div> |
| </div> |
| <h1>Grid 1 auto column</h1> |
| <div id="grid-2" class="grid"> |
| <div class="firstRowFirstColumn"> |
| grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item |
| grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item |
| grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item |
| grid item grid item grid item grid item grid item grid item grid item grid item grid item grid item |
| </div> |
| </div> |
| </body> |
| </html> |
