块状网格-均分

块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。

可以使用

比如下面 在中等屏幕下面 显示四张图片 平均分四份

    <ul class="medium-block-grid-4">
        <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=530090170,1803130651&fm=26&gp=0.jpg" alt=""></li>
        <li><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2858038929,3751379127&fm=26&gp=0.jpg" alt=""></li>
        <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=604482600,1393215599&fm=26&gp=0.jpg" alt=""></li>
        <li><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205470526,1518785822&fm=26&gp=0.jpg" alt=""></li>
    </ul>Code language: HTML, XML (xml)

当然 li里面的除了图片 还可以是任意的东西 比如文字

    <ul class="small-block-grid-3">
        <li><p>Just a Simple Example Text...</p></li>
        <li><p>Just a Simple Example Text...</p></li>
        <li><p>Just a Simple Example Text...</p></li>
    </ul>Code language: HTML, XML (xml)

另外 还可以为不同的设置屏幕 设置不同的等分

    <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
        <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=530090170,1803130651&fm=26&gp=0.jpg" alt=""></li>
        <li><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2858038929,3751379127&fm=26&gp=0.jpg" alt=""></li>
        <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=604482600,1393215599&fm=26&gp=0.jpg" alt=""></li>
        <li><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205470526,1518785822&fm=26&gp=0.jpg" alt=""></li>
    </ul>Code language: HTML, XML (xml)