Re: Proposition. Positioning content with guidelines

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 UTC