CSS Grid Layout Testcases

• From: Alexander Shpack <shadowkin@gmail.com>
• Date: Thu, 29 Mar 2012 00:01:42 +0300
• To: www-style <www-style@w3.org>
• Message-ID: <CAK4xKX=ReT==f2CvhhaDJ35iV80dhF-Q49O+TzWfmiX5hX60oQ@mail.gmail.com>

<style type="text/css">
   .grid {
       display: grid;
       grid-rows: auto minmax(min-content, 1fr) auto
   }

   .title    { grid-column: 1; grid-row: 1 }
   .score    { grid-column: 1; grid-row: 3 }
   .stats    { grid-column: 1; grid-row: 2; grid-row-align: start }
   .board    { grid-column: 2; grid-row: 1; grid-row-span: 2 }
   .controls { grid-column: 2; grid-row: 3; grid-column-align: center }
   .controls2 { grid-row: 3; }
</style>

<div class="grid">
   <div class="title">Game Title</div>
   <div class="score">Score</div>
   <div class="stats">Stats</div>
   <div class="board">Board</div>
   <div class="controls">Controls</div>
</div>
<div class="grid">
   Hello, i'm anonymous text. Please specify my position in flow
   <div class="title">Game Title 2</div>
   <div class="score">Score 2</div>
   <div class="stats">Stats 2</div>
   <div class="board">Board 2</div>
   <div class="grid controls">
       <div class="title">Game Title 3.1</div>
       <div class="title">Game Title 3.2</div>
       <div class="title">Game Title 3.3</div>
       <div class="controls">Controls 3</div>
   </div>
</div>
<div class="controls2">WHERE AM I?</div>

Please, draw the final result
:)

1. Where should be placed text "Hello, i'm anonymous text. Please
specify my position in flow"
2. What happened, if one grid will be placed inside other one?
3. What happened, if node have both properties: cell and grid?
4. What happened, if many nodes trying to fit into one cell placement?
5. If grid is incomplete (title's cell position is 1:1, controls have
2:3 pos), what happened in this case?
6. What happened with last element? Is it grid cell?

Received on Wednesday, 28 March 2012 21:02:11 UTC