SOURCE

<title>网格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js">
    </script>
<div class="row">
        <h2>网格-三个不均等列</h2>
        <p>创建三个均等列（25%/50%/25%）在中型和大型中会显示三个列，小型设备自动重叠</p>
        <p>重置浏览器窗口大小查看效果</p>
        <div class="medium-3 columns" style="background-color: chartreuse;">
            <p>.medium-3</p>
        </div>
        <div class="medium-6 columns" style="background-color: rgb(241, 155, 213);">
            <p>.medium-6</p>
        </div>
        <div class="medium-3 columns" style="background-color: chartreuse;">
            <p>.medium-3</p>
        </div>
    </div>