• css grid布局使用


    + display:grid 指定一个容器采用网格布局 ,采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
    一、容器属性
    默认情况下 容器元素都是块级元素,但也可以设置成行内元素
    display:inline-block
    Note:设置网格布局后,容器子元素(项目)的float、display:inline-block、 display:table-cell、 vertical-align 和Column-*等设置都将失效
    2、grid-template-columns 属性
    grid-template-rows属性
    容器指定网格布局以后,接着就要划分行和列. gri-template-columns属性定义每一列的列宽 ,grid-template-rows 属性定义每一行行高
    1 .contain{
    2   display:grid;
    3   grid-template-rows: 100px 100px 100px;
    4   grid-template-columns:100px 100px 100px;
    5 }
     
    (1) repeat()
    参数重复写非常麻烦,可以使用repeat()函数,简化重复值, repeat()接受两个参数,第一个参数是重复次数,第二个参数是重复值
     1 .contain{
     2     display:grid;
     3     grid-template-rows: repeat(4,33%);
     4     grid-template-columns:repeat(3,33%);
     5 }
     6 //或
     7 .contain{
     8     display:grid;
     9     grid-template-rows: repeat(4,100px 20px 80px);
    10     grid-template-columns:repeat(4,100px 20px 80px);
    11 }
    (2) auto-fill 关键字
    有的时候单元格大小是固定,但是容器的大小不确定。如果希望每一行(或没一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字
    (3) fr关键字
    网格布局提供fr关键字(fraction的缩写,意为“片段”) 。如果两列宽度为1fr 和2fr,就表示后面是前者的两倍
    1 .contain{
    2 display:grid;
    3 grid-template-rows: repeat(4,100px);
    4 grid-template-columns:repeat(3,1fr);
    5 }
    (4)minmax()
    minmax()函数产生一个长度范围,表示长度在这个范围之内,它接受两个参数,分别最小值和最大值
    1 .contain{
    2     display:grid;
    3     grid-template-rows: repeat(5,100px);
    4     grid-template-columns:1fr 1fr minmax(300px, 1fr);;
    5 }
    (5)auto 关键字
    auto 关键字表示由浏览器自己决定长度
    1 .contain{
    2     display:grid;
    3     grid-template-rows: repeat(5,100px);
    4     grid-template-columns:200px auto 200px;
    5 }
    (6)网格线名称
    grid-template-columns 属性 和grid-template-rows 属性里面,还可以使用方括号,指定每一根网格的名称,方便以后的引用
     
    1 .contain{
    2     display:grid;
    3     grid-template-rows: repeat(5,100px);
    4     grid-template-columns:[c1] 100px [c2] 100px [c3] auto;
    5 }
    Note:网格布局允许同一条线多个名字比如 [c1 c2]
    (7) 布局实例
    grid-template-columns 属性 和grid-template-rows 属性 值可以使用百分比
    1 .contain{
    2   display:grid;
    3   grid-template-rows: repeat(5,100px);
    4   grid-template-columns:70% 30%;
    5 }
    3.grid-row-grap属性 grid-column-gap属性 grid-gap属性
    grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列间隔(列间距)
    1 .contain{
    2   display:grid;
    3   grid-template-rows: repeat(5,100px);
    4   grid-template-columns:200px 200px 200px;
    5   grid-row-gap: 20px;
    6   grid-column-gap: 20px;
    7 }
    Note:grip-gap 属性 grip-row-gap 和 grip-column-gap的合并写法
    grip-gap:<grip-row-gap><grip-column-gap>
    4、grid-template-areas 属性
    网格布局允许指定 "区域"(area),一个区域由单个或多个单元格组成,grid-template-areas属性用于自定义区域
    1 .contain{
    2   display:grid;
    3   grid-template-rows: repeat(5,100px);
    4   grid-template-columns:200px 200px 200px;
    5   grid-gap: 10px 30px;
    6   grid-template-areas: 'a a a' 'b c d' 'e f g' ;
    7 }
    5、grid-auto-flow 属性
    划分网格以后,容器的子元素会按照顺序,自动放置在每一块网格。默认的放置顺序是先行后列,即先填满第一行,在开始放入第二行
    Note: grid-auto-flow 属性决定,默认值 row ,即先行后列。也可以设置成cloumn ,变成先列后行
     1 .contain{
     2 display:grid;
     3 grid-template-rows: repeat(5,100px);
     4 grid-template-columns:200px 200px 200px;
     5 grid-gap: 10px 30px;
     6 grid-template-areas: 'a a a' 'b c d' 'e f g' ;
     7 grid-auto-flow:row;
     8 }
     9 
    10 
    11 /**/
    12 .contain{
    13 display:grid;
    14 grid-template-rows: repeat(5,100px);
    15 grid-template-columns:200px 200px 200px;
    16 grid-gap: 10px 30px;
    17 grid-template-areas: 'a a a' 'b c d' 'e f g' ;
    18 grid-auto-flow:column;
    19 }
    Note:grid-auto-flow属性除了设置成row 和 column ,还可以设置成 row dense 和 cloumn dense 。这两个值主要用于项目指定位置以后剩余位置的排列方式
    1 .contain{
    2   display:grid;
    3   grid-template-rows: repeat(5,100px);
    4   grid-template-columns:200px 200px 200px;
    5   grid-gap: 10px 30px;
    6   grid-auto-flow:column dense;
    7   //或
    8   //grid-auto-flow:row dense
    9 }
    6、 justify-items属性 align-items属性 place-items属性
    justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)
     
     1 .contain{
     2   display:grid;
     3   grid-template-rows: repeat(5,100px);
     4   grid-template-columns:200px 200px 200px;
     5   grid-gap: 10px 30px;
     6   grid-auto-flow:column dense;
     7   justify-items: end;
     8   align-items:end;
     9   //或 place-items:end end;
    10 }
    Note:pace-items 属性 是align-items属性和justify-items属性合并写法
    如果第二个值省略,默认与第一个值相等
     
    7、justify-content 属性内容区域水平位置(左中右),align-content 属性内容区域垂直位置(上中下),
    start:对齐容器的起始边框。
    end - 对齐容器的结束边框。
    center - 容器内部居中。
    space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
    space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。
    space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
     
     
     1 .contain{
     2    display:grid;
     3    grid-template-rows: repeat(5,100px);
     4    grid-template-columns:200px 200px 200px;
     5    grid-gap: 10px 30px;
     6    grid-auto-flow:column dense;
     7    justify-content: end;
     8    align-items: end;
     9   //place-content: end start;
    10 }
    Note: place-content: align-content属性 和 justify-content属性的简写
    8、grid-auto-columns 属性, grid-auto-rows 属性 浏览器用来设置多余网格列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
    1 .contain{
    2   display:grid;
    3   grid-template-rows: repeat(3,100px);
    4   grid-template-columns:200px 200px;
    5   grid-auto-rows: 300px;
    6 }
    9、grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
     
    grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。



    二、项目属性
    1、项目位置可以指定,具体方法就是指定项目四个边框,分别定位在哪根线上
    gird-column-start 属性 :左边框所在垂直网格线
    grid-column-end 属性 :右边框所在垂直网格
    grid-row-start 属性 :上边框所在水平网格
    grid-row-end 属性 :下边框所在水平网格
     
    1 .bgcolor2{
    2   grid-column-start: 1;
    3   grid-column-end: 2;
    4   grid-row-start: 2;
    5   grid-row-end: 4;
    6 }
    (1) span 关键字
    这四个属性可以使用span 关键字,表示“跨越”,即左右边框(上下边框)跨越多少个网格
    1 .grid1{
    2   background-color: aliceblue;
    3   grid-column-start: span 3;
    4 }
    Note :这四个属性产生项目的重叠,使用z-
    2.grid-column属性 ,grid-row 属性
    grid-column属性是 grid-colum-start属性 和gird-column-end属性的合并简写
    grid-row 属性是 grid-row-start属性 和grid-row-end 属性的合并写法
     1 .grid2{
     2   background-color: aqua;
     3   grid-column: 1 / 3;
     4   grid-row:1 / 3;
     5 }
     6 //等价于
     7 .grid2{
     8   background-color: aqua;
     9   grid-column-start:1;
    10   grid-column-end:3;
    11   grid-row-start:1;
    12   grid-row-end: 3;
    13 }
    Note:斜杆以及后面可以省略,默认跨域一个网格
    3、grid-area属性 指定项目放在哪一个区域 
    1 .grid2{
    2 background-color: aqua;
    3 grid-area: e;
    4 // grid-area: 2 / 1 / 3 / 4;
    5 }
    Note:grid-area属性还可以用作grid-row-start 、 grid-column-start 、grid-row-end 、 grid-column-end 的合并简写直接指定项目位置
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    4、justify-self 属性,align-self熟悉, place-self属性
    justify-self属性,设置单元格内容的水平位置(左中右),和justify-items属性用法一致但只用于单个项目
    align-self属性,设置单元格内容垂直位置(上中下),和align-items属性用法一致,也只用于单个项目
    (1)这两个属性都可以去四个值
    start:对齐单元格起始边缘
    end:对其单元格结束边缘
    center:单元格内部居中
    stretch:拉伸,占满整个单元格(默认值)
    1 .grid2{
    2   background-color: aqua;
    3   justify-self: stretch;
    4   align-self: center;
    5   //place-self:stretch center;
    6 }
    Note:place-self 属性是 align-self属性 和justify-self属性合并写法
    如果第二个值省略则会认为两个值相等。

    参考链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html



    游走大神世界,体验代码魅力
  • 相关阅读:
    初学flask
    第一次使用pyqt5解决的几个小问题
    一些细节
    关于random
    go语言 方法
    go 语言 struct 另类构造函数 继承
    go 语言 链表 的增删改查
    go 语言 链表
    go 语言struct
    无题
  • 原文地址:https://www.cnblogs.com/hongding/p/11332395.html
Copyright © 2020-2023  润新知