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

Re: Proposition. Positioning content with guidelines

From: François REMY <fremycompany_pub@yahoo.fr>
Date: Thu, 23 Feb 2012 23:28:37 +0100
Message-ID: <56EADED66D414BE0ACBE0D3F91CE0E7B@FREMY2>
To: "Alexander Shpack" <shadowkin@gmail.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style" <www-style@w3.org>
Your "simple task" is easy to solve with grids.

#grid { display: grid; grid-columns: 1fr 1fr; grid-flow: rows; }
#grid div { grid-row: auto; grid-column: 1; }
#grid div.active { grid-row: start end; grid-column: 0; }

Again, as I said in a previous offline mail, you're not taking in 
consideration the fact that grids can be used as a grid flow.

But, there are still cases that you outlined and that can't be solved by 
grids, but a small change could be made to grids to solve that one (auto 
multicolumns span). I'm going to start a more in-depht work on that one 
tomorrow to make a clear proposal about that.

If you have other cases you think we can't solve with grids, please send 
them, I think everyone is interested.



-----Message d'origine----- 
From: Alexander Shpack
Sent: Thursday, February 23, 2012 9:51 PM
To: Tab Atkins Jr.
Cc: François REMY ; www-style
Subject: Re: Proposition. Positioning content with guidelines

>
>
>> 2. In Grid Layout each content block should have specified place:
>> grid-column: 1; grid-row: 1. In Guidelines Layout it's not required.
>
> I don't understand the benefit here.

Try to solve this simple task
http://sorrow.tavrida.net/img/4_real_task.png

>
>
>> 3. In Grid Layout, if any box have fixed position, DOM manipulations
>> with it have not sense. Guidelines don't fix the box position, authors
>> might rearrange boxes over DOM Core methods
>
> I don't understand what you mean.  Can you elaborate?
>


Very good example is here:
http://www.w3.org/TR/css3-grid-layout/#source-independence

What happens if I delete from HTML source
<div id="stats">Stats</div>
?
A hole.

What happens if I change HTML code to the next one
<div id="grid">
    <div id="title">Game Title</div>
    <div id="board">Board</div> <!-- MOVED UP -->
    <div id="score">Score</div>
    <div id="stats">Stats</div>
    <div id="controls">Controls</div>
</div>
?
The correct answer is ... nothing!

But, what happens, if I create next code

<div id="grid">
    <div id="title">Game Title</div>
    <div>
       <h1>Hey! I'm header! Where is my place?</h1> <!-- NEW ITEM -->
       <div id="board">Board</div>
       <div id="score">Score</div>
       <div id="stats">Stats</div>
   </div>
    <div id="controls">Controls</div>
</div>

The answer is... o_O ???


-- 
s0rr0w 
Received on Thursday, 23 February 2012 22:29:05 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:51 GMT