• grid 属性总结


    一、容器属性

    1、display: grid;

    块级的网格布局。

    2、display: inline-grid;

    行内的网格布局。

    3、grid-template-columns

    指定列的宽度。

    ① grid-template-columns:10px 20px 30%;

    设置列,有几个值就代表有几列,值就是相应列的宽度。

    ② grid-template-rows: 200px 200px 200px;

    设置行,有几个值就代表有几行,值就是相应行的高度。

    ③ grid-template-columns: 100px 100px 100px;

    固定值

    ④ grid-template-columns: 33.33% 33.33% 33.33%;

    百分比

    ⑤ grid-template-columns: 150px 1fr 2fr;

    第一列的宽度为150像素,第二列的宽度是第三列的一半。

    ⑥ grid-template-columns: 1fr 1fr;

    表示两个相同宽度的列

    ⑦ grid-template-columns: repeat (3, 1fr);

    第一个参数代表的是重复的次数,第二个参数代表的是每行/每列的具体的宽度/高度。

    ⑧ grid-template-columns: repeat(auto-fill, 100px);

    表示每列宽度100px,然后自动填充,直到容器不能放置更多的列。

    ⑨ grid-template-columns: 1fr 1fr minmax(100px, 1fr);

    长度范围,minmax(100px, 1fr)表示列宽不小于100px,不大于1fr。

    ⑩ grid-template-columns: 100px auto 100px;

    由浏览器自己决定长度。

    4、grid-row-gap 属性,grid-column-gap 属性,grid-gap 属性

    ① grid-row-gap: 20px;

    设置行间距

    ② grid-column-gap: 20px;

    设置列间距

    ③ grid-gap: 20px 20px;

    简写形式,设置行间距、列间距。如果省略了第二个值,浏览器认为第二个值等于第一个值。
    注意:上面三个属性名的grid-前缀已经删除,grid-column-gap和grid-row-gap写成column-gap和row-gap,grid-gap写成gap

    5、grid-auto-flow

    划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行。这个顺序由grid-auto-flow属性决定。

    ① grid-auto-flow: column;

    顺序变成"先列后行"

    6、justify-items 属性,align-items 属性,place-items 属性

    justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)。
    place-items属性是align-items属性和justify-items属性的合并简写形式。
    .container {
      justify-items: start | end | center | stretch;
      align-items: start | end | center | stretch;
    }
    • start:对齐单元格的起始边缘。
    • end:对齐单元格的结束边缘。
    • center:单元格内部居中。
    • stretch:拉伸,占满单元格的整个宽度(默认值)。

    7、justify-content 属性,align-content 属性,place-content 属性

    justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)。
    place-content属性是align-content属性和justify-content属性的合并简写形式。
    .container {
        justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
        align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    }
    • start:对齐容器的起始边框。
    • end:对齐容器的结束边框。
    • center:容器内部居中。
    • stretch:项目大小没有指定时,拉伸占据整个网格容器。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
    • space-between:项目与项目的间隔相等,项目与容器边框之间没有间隔。
    • space-evenly:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。

    二、项目属性

    1、justify-self 属性,align-self 属性,place-self 属性

    justify-self属性设置单元格内容的水平位置(左中右),align-self属性设置单元格内容的垂直位置(上中下),
    place-self属性是align-self属性和justify-self属性的合并简写形式。
    .item {
        justify-self: start | end | center | stretch;
        align-self: start | end | center | stretch;
    } 
    • start:对齐单元格的起始边缘。
    • end:对齐单元格的结束边缘。
    • center:单元格内部居中。
    • stretch:拉伸,占满单元格的整个宽度(默认值)。
  • 相关阅读:
    sql 积分和消费,类似银行出入账单
    easyui datagrid选中当前行的index
    jquery 1+1=11 纠结死我了
    jquery 选择器
    easyui tree节点设置disabled的功能
    用户体验为什么如此重要?
    三个月内获得三年工作经验
    常用网站
    防呆设计
    读书笔记:启示录,打造用户喜爱的产品
  • 原文地址:https://www.cnblogs.com/zjianfei/p/16355164.html
Copyright © 2020-2023  润新知