Grid布局 --- 初期尝试

CSS：Grid 布局

网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
　　就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从布使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
　　此外，没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。

Grid 语法简要

设置父元素布局为 grid ,即可使用 grid-template-columns 和 grid-template-rows 定义网格的列数、行数以及网格的大小。

.box {
    display: grid | inline-grid | subgrid;
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

子元素可使用 grid-area 合并网格或位移。

.box-child{
    grid-area: x / x / x / x;
}

实操

效果图

编写HTML

<div class="m-main-fu-wu">
                    <div class="m-fu-wu-1">
                        <h3 class="m-fu-wu-title">金融服务</h3>
                        <small>Financial Services</small>
                    </div>
                    <div class="m-fu-wu-2">
                        <div class="m-text-wrapper">
                            <h4 class="m-common-title">MoneyMoney红</h4>
                            <small>MoneyMoney红一句话介绍Money<br>
                            Money红一句话介绍</small>
                        </div>
                    </div>
                    <div class="m-fu-wu-3">
                        <div class="m-text-wrapper">
                            <h4 class="m-common-title">佐罗侃侃</h4>
                            <small>佐罗侃侃一句话介绍，佐罗侃侃<br>
                                一句话介绍</small>
                        </div>
                    </div>
                    <div class="m-fu-wu-4">      
                        <div class="m-text-wrapper s-strong">
                            <h4 class="m-common-title">投资分享会</h4>
                            <small>投资分享会一句话介绍，投资分享会</small>
                        </div>
                    </div>
                    <div class="m-fu-wu-5">
                        <div class="m-text-wrapper s-strong">
                            <h4 class="m-common-title">猎牛俱乐部</h4>
                            <small>猎牛俱乐部一句话介绍，猎牛俱乐部一句话介绍</small>
                        </div>
                    </div>
                </div>

编写CSS

.m-main-fu-wu{
    margin-top: 80px;
    display: grid;
    height: 546px;
    grid-template-rows: 228px 45px 273px;
    grid-template-columns: 362px 319px 319px;
    grid-column-gap:0;
    grid-row-gap:0;
    
}
.m-fu-wu-1{
    grid-area: 1 / 1 / 3 / 2;
    background: #E60012;
}
.m-fu-wu-4{
    grid-area: 3 / 1 / 4 / 2;
}
.m-fu-wu-5{
    grid-area: 2 / 2 / 4 / 4;
}
.m-fu-wu-title{
    margin-top: 100px;
    margin-bottom: 18px;
    margin-left: 40px;
    font-size: 32px;
    color: #fff;
    letter-spacing: 1px;
}
.m-fu-wu-1 small{
    margin-left: 40px;
    font-size: 18px;
    color: #fff;
}
.m-common-title{
    margin-bottom: 8px;
    font-size: 18px;
    color: #fff;
}
.m-text-wrapper small{
    font-size: 13px;
    color: #fff;
    line-height: 1.5em;
}
.m-text-wrapper{
    position: absolute;
    bottom: 8px;
    right: 15px;
    text-align: right;
}
.m-text-wrapper.s-strong .m-common-title{
    font-size: 24px;
}
.m-text-wrapper.s-strong small{
    font-size: 16px;
}
.m-text-wrapper.s-strong{
    bottom: 12px;
    right: 20px;
}

总结

Grid布局固然好用，但目前兼容性还不是很好，一般配合webpack一起使用。