All examples By author By category About

eesur

d3 | Pure css grid programmatically

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