- From: Jihye Hong via GitHub <sysbot+gh@w3.org>
- Date: Wed, 06 Sep 2017 05:33:39 +0000
- To: public-css-archive@w3.org
> Short example:
Nice example! How about for the Grid layout?
For example, there is a sample like this:
```html
<div id="grid">
<div id="section1">
<button id="btn1">Button</button>
<button id="btn2">Button</button>
</div>
<div id="section2">
<button id="btn3">Button</button>
<button id="btn4">Button</button>
</button>
</div>
<div id="section3">
<button id="btn5">Button</button>
<button id="btn6">Button</button>
</div>
```
```css
#grid {
display: grid;
grid-gap: 20px;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
}
#section1 {
grid-column: 1 / 3;
}
#section2 {
grid-column: 2;
grid-row: 2;
}
#section3 {
grid-column: 1 ;
grid-row: 2;
}
```
The DOM order (structural order) is `#btn1`, `#btn2`, `#btn3`, `#btn4`, `#btn5`, `#btn6` and it is the default tab order. You can see how it works[ here](https://jihyerish.github.io/focus-grid/).
Is it right that if `nav-order: visual` is given to `#grid`, then the tab order is changed to `#btn1`, `#btn2`, `#btn5`, `#btn3`, `#btn6`, `#btn4`?
--
GitHub Notification of comment by jihyerish
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1764#issuecomment-327379428 using your GitHub account
Received on Wednesday, 6 September 2017 05:33:36 UTC