css网格布局（grid）的常用属性介绍(2)-木庄网络博客

常用属性：

grid-column-start: 列网格线开始，
grid-column-end: 列网格线结束
grid-column: start/end | start/span count
order: 与z-index的属性相同，表示层叠的位置。
grid-area: 网格名，在使用grid-template-areas时比较有用。
justify-self: 单个网格项在行轴线的对齐方式
align-self: 单个网格项在列轴线的对齐方式

<div class='container'>
        <div class='child'></div>
    </div>
    <style>
    .container {
        display: grid;
        width: 580px;
        height: 580px;
        grid-gap: 3px;
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(5, 1fr);
        background-color: blanchedalmond;
    }
    .child {
        grid-column-start: 6;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 5;
        background: url(./babar.png);
        background-size: 116px 116px;
        order：1；
    }

在审查元素的时候毫不意外的发现该布局为五行五列的布局，上述的child中前四行代码属性的值都是以网格线的顺序为基准，前两行代码表示第六列网格线开始，到第三列网格线结束，即表示后三列。其中的start不一定要比end小。第三四行代码表示第一个网格线开始，第五个网格线结束，即表示前四行，四行代码综合起来就如图所示。

当然，child中的前四行代码也可以简写成这样：

grid-row: 1/ 5;
grid-column: 6/ 3;
或者
grid-row: 1/ span 4; // 横向第一个网格线开始，以下的4个网格轨道
grid-column: 3/span 3; // 竖向第三条网格线开始，以后的3个网格轨道
甚至简写成这样
grid-area: 1/3/ span 4/span 3;

更多编程相关知识，请访问：编程教学！！

以上就是css网格布局（grid）的常用属性介绍的详细内容，更多文章请关注木庄网络博客！

返回前面的内容