SOURCE

<!-- 1. 支持每行 1-6 个，改下面的 col-4 就行了 -->
<div class="m-grid">
    <ul class="block col-4">
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>



<!-- 2. 带边框 with-border  -->
<div class="m-grid with-border">
    <ul class="block col-4">
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">带边框</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>



<!-- 3. 一行 1 个  -->
<div class="m-grid with-border">
    <ul class="block col-1">
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>



<!-- 3. 一行 2 个  -->
<div class="m-grid with-border">
    <ul class="block col-2">
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>



<!-- 4. 一行 3 个  -->
<div class="m-grid with-border">
    <ul class="block col-3">
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>



<!-- 4. 一行 5 个  -->
<div class="m-grid with-border">
    <ul class="block col-5">
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>



<!-- 4. 一行 6 个  -->
<div class="m-grid with-border">
    <ul class="block col-6">
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>

/* 最外层 */
.m-grid { overflow: hidden; position: relative; margin: 20px; padding: 20px; background: #fff; font-size: 14px; }
    /* 列表 */
    .m-grid > .block { overflow: hidden; margin: -10px -10px 0 0; padding: 0; }
        .m-grid > .block > .item { float: left; margin: 0; padding: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-box-sizing: border-box; box-sizing: border-box; }
        .m-grid > .col-1 > .item { float: none; }
        .m-grid > .col-2 > .item { width: 50%; }
        .m-grid > .col-3 > .item { width: 33.3333%; }
        .m-grid > .col-4 > .item { width: 25%; }
        .m-grid > .col-5 > .item { width: 20%; }
        .m-grid > .col-6 > .item { width: 16.6667%; }
            /* 单个，要调整内边距改 .inner 的 padding */
            .m-grid .inner { display: block; margin: 10px 10px 0 0; text-align: center; }
                .m-grid .inner:hover .txt { color: #03a9f4; }
                /* 图标 */
                .m-grid .pic { width: 48px; }
                /* 文本 */
                .m-grid .txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 5px 0; width: 100%; color: #444; }

    /* 带边框 */
    .m-grid.with-border { padding: 0; border: 1px solid #eee; }
        .m-grid.with-border > .block { margin: -1px 0 0 -1px; }
            .m-grid.with-border > .block > .item { border: solid #eee; border-width: 1px 0 0 1px; }
            /* 单个，要调整内边距改 .inner 的 padding */
            .m-grid.with-border .inner { margin: 0; padding: 10px; }