W3C home > Mailing lists > Public > www-style@w3.org > March 2012

Re: new CSS Grid Layout WD published

From: Alexander Shpack <shadowkin@gmail.com>
Date: Wed, 28 Mar 2012 23:39:28 +0300
Message-ID: <CAK4xKX=6uXSb0AF=vj_H5eYzWfpKpeCnSzH0PPN2UzKasE09RA@mail.gmail.com>
To: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
Cc: www-style list <www-style@w3.org>
<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 }
</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">
        <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="controls">WHERE AM I?</div>

Please, draw the final result
:)
Received on Wednesday, 28 March 2012 20:39:57 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:48:53 GMT