block by eesur 4cfceb45932efd95c4e5

d3 | Pure css grid programmatically

Full Screen

Example uses D3 to produce Pure’s responsive grid programmatically.

For example, elements within a ‘3’ row grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

View console or source to see created elements/grid elements.

More info on Pure.css grids

index.html

d3_code_pure.js