SOURCE

<!-- 1. 左边固定宽度，右侧自适应剩余空间 -->
<div class="m-layout-1">
    <div class="l">左边固定宽度</div>
    <div class="r">右侧自适应剩余空间右侧自适应剩余空间右侧自适应剩余空间右侧自适应剩余空间右侧自适应剩余空间右侧自适应剩余空间右侧自适应剩余空间右侧自适应剩余空间右侧自适应剩余空间</div>
</div>


<!-- 2. 两边固定宽度，中间自适应剩余空间 -->
<div class="m-layout-2">
    <div class="l">左边固定宽度</div>
    <div class="c">中间自适应剩余空间中间自适应剩余空间中间自适应剩余空间中间自适应剩余空间中间自适应剩余空间中间自适应剩余空间中间自适应剩余空间中间自适应剩余空间中间自适应剩余空间</div>
    <div class="r">右边固定宽度</div>
</div>


<!-- 3. 宫格布局 -->
<ul class="m-layout-3 col-3">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
</ul>

/* 左边固定宽度，右侧自适应剩余空间 */
.m-layout-1 { position: relative; padding-left: 100px; }
    .m-layout-1 .l { position: absolute; margin-left: -100px; }
    .m-layout-1 .r { float: none; }

/* 两边固定宽度，中间自适应剩余空间 */
.m-layout-2 { position: relative; padding: 0 100px; }
    .m-layout-2 .l { position: absolute; margin-left: -100px; }
    .m-layout-2 .c { float: none; }
    .m-layout-2 .r { position: absolute; top: 0; right: 0; }

/* 宫格布局 */
.m-layout-3 { overflow: hidden; }
    .m-layout-3 .item { float: left; -webkit-box-sizing: border-box; box-sizing: border-box; }
        .m-layout-3.col-2 .item { width: 50%; }
        .m-layout-3.col-3 .item { width: 33.33333%; }
        .m-layout-3.col-4 .item { width: 25%; }
        .m-layout-3.col-5 .item { width: 20%; }
        .m-layout-3.col-6 .item { width: 16.66667%; }