<p dir="auto">CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.</p>
<p dir="auto">Watched a youtube about CSS Grids: <a href="https://youtu.be/txZq7Laz7_4" rel="nofollow">https://youtu.be/txZq7Laz7_4</a></p>
<p dir="auto">Nice concept that seems to play nice with component based development. Integration with Next.js may prove to solve CSS issues and the way we think about making apps.</p>
<p dir="auto">Probably goes against providing options to the developer but could image a lean mean workflow.</p>
<p dir="auto">Any thoughts?</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">Standard &lt;style jsx&gt; with built in support for grid layouts/fallback support.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Currently CSS can be a mess and look quite ugly with multiple nested divs and leads to accessibility issues.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>To many options for front end CSS frameworks that don't work well with component based workflow.</li>
<li>Heavy CSS frameworks in the global space.</li>
<li>Incomplete CSS react libraries like Semantic UI.</li>
<li>Doing things the old way.</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">Providing a rich UX is one of the most complicating parts of developing an app and Next.js definitely makes things easier and is also lightning fast. I believe something like "CSS Grid"  could make layouts of the components where you want them easy while increasing performance.</p>
<h2 dir="auto">Links</h2>
<p dir="auto"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout</a><br>
<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow">https://css-tricks.com/snippets/css/complete-guide-grid/</a><br>
<a href="https://www.w3.org/TR/css-grid-1/" rel="nofollow">https://www.w3.org/TR/css-grid-1/</a></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Calling <code class="notranslate">Router.push({pathname: 'about'})</code> should work just as <code class="notranslate">&lt;Link href={{pathname: 'about'}}/&gt;</code> does, and as described <a href="https://github.com/zeit/next.js#with-url-object-1">here</a>.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Client side, it throws an error <code class="notranslate">Route name should start with a "/", got "page"</code> (thrown from <a href="https://github.com/zeit/next.js/blob/v3-beta/lib/page-loader.js#L22">https://github.com/zeit/next.js/blob/v3-beta/lib/page-loader.js#L22</a>)</p>
<p dir="auto">It then immediately falls back to the server side route, which then loads the page as usual.</p>
<p dir="auto">Depending on how long the server page takes to load, you may or may not see the error above.</p>
<p dir="auto">Note that absolute pathnames (<code class="notranslate">/about</code>) work as normal.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li><a href="https://github.com/tmeasday/next-routing-bug">https://github.com/tmeasday/next-routing-bug</a> - <code class="notranslate">git clone https://github.com/tmeasday/next-routing-bug; cd next-routing bug; npm install; npm run dev</code></li>
<li>Click the "Link" or "Leading Slash" tags, notice normal behaviour.</li>
<li>Click the "No Leading Slash" tag, notice the error for 2 seconds (how long the "page" takes to load).</li>
<li>Inspect the server console and note that the "page" page loaded from the server.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I think the issue here is that the <code class="notranslate">Link</code> calls <code class="notranslate">url.resolve</code> <a href="https://github.com/zeit/next.js/blob/v3-beta/lib/link.js#L58">here</a>, where as <code class="notranslate">Router.push</code> does not.</p>
<p dir="auto">I suspect the <code class="notranslate">resolve</code> call should come somewhere deeper in the stack.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>2 + 3 betas</td>
</tr>
<tr>
<td>node</td>
<td>8.1.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.5</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>