<p>I had a look at this recently, but my <a href='/code/css/#css-grid-for-layouts-and-how-to-use-it'>previous example</a> still used rows for a grid, which apparently is not the correct way of using css grids.</p>

<p>I think the issue (I had) with css grid is it seems complex to get started as its different to the old wrap / row / col layouts</p>

<p>You should no longer need row's although you can use them if you like, but it will make the stacking a bit different. <a href='/code/css/#css-grid-for-layouts-and-how-to-use-it'>My example first post on css grids</a> still used row's.</p>

<h2>Wrap</h2>

<p>this layout still uses a wrap to center and wrap the layout, but also has a fallback to flex if the grid is not supported. </p>

<pre>
/ fallback for older browsers that do not support grid display /
.wrap {
display: flex;
flex-wrap: wrap;
}

/ the grid setup /
.wrap {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
}
</pre>

<p>wip</p>

<h2>The Test</h2>
<iframe src='examples/css-grid-layout-no-rows.html'></iframe>
<p><a href='examples/css-grid-layout-no-rows.html' target='_blank' class='btn btn-primary'>example link</a></p>

<h2>Links</h2>
<p><a href='https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/'>You do not need a CSS Grid based Grid System</a></p>