精华内容
下载资源
问答
  • GRID布局

    千次阅读 2020-04-06 13:36:28
    GRID布局 目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的...

    Grid布局

    目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。

    基础

    通过指定display: grid;指定容器使用Grid布局,Grid布局中采用网格布局的区域,称为容器,容器内部采用网格定位的子元素,称为成员。容器中水平区域称为行,垂直区域称为列,可以将其看作二位数组。划分网格的线就称为网格线,正常情况下n行有n + 1根水平网格线,m列有m + 1根垂直网格线。注意当容器设置为Grid布局以后,容器子元素的floatdisplay: inline-blockdisplay: table-cellvertical-aligncolumn-*等设置都将失效。

    容器属性

    grid-template-rows grid-template-columns

    grid-template-rows属性定义每一行的行高,设定为多少行就设置多少个值,取值可以为固定像素,也可以为百分比,grid-template-columns属性定义每一列的列宽,设定为多少列就设置多少个值,取值可以为固定像素,也可以为百分比。

    <div id="t1">
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
    <!-- 
        0 1 2
        3 4 5
        6 7 8
     -->
    
    <style type="text/css">
        #t1{
            display: grid;
            grid-template-rows: 30px 30px 30px;
            grid-template-columns: 30px 30px 30px;
        }
    </style>
    

    repeat

    repeat()函数可以简化重复的值,其可以自动重复设定的规则。

    <div id="t2">
        <div>9</div>
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
        <div>e</div>
    </div>
    <!-- 9 ab cd e -->
    
    <style type="text/css">
       #t2{
            display: grid;
            grid-template-columns: repeat(3,30px 10px); /* 设定为重复3次 30px 10px 规则 */
        }
    </style>
    

    auto-fill

    有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充,当容器不足容纳成员时会自适应换行。

    <div id="t3" style="width: 60px;">
        <div>f</div>
        <div>g</div>
        <div>h</div>
    </div>
    <!-- 
        f g
        h 
    -->
    
    <style type="text/css">
       #t3{
            display: grid;
            grid-template-columns: repeat(auto-fill,30px);
        }
    </style>
    

    fr

    为表示比例关系,网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。

    <div id="t4">
        <div>i</div>
        <div>j</div>
        <div>k</div>
    </div>
    <!-- 
        i j  k
    -->
    
    <style type="text/css">
       #t4{
            display: grid;
            grid-template-columns: 1fr 2fr 3fr;
        }
    </style>
    

    minmax

    minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值,当距离不够时会从最大值自动减少长度或宽度到设定最小值为止。
    minmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )

    <div id="t5">
        <div>l</div>
        <div>m</div>
        <div>n</div>
    </div>
    <!-- 
        l m  n
    -->
    
    <style type="text/css">
       #t5{
            display: grid;
            grid-template-columns: 30px minmax(30px,100px) 30px;
        }
    </style>
    

    auto

    auto关键字表示由浏览器自己决定长度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width,且这个值大于最大宽度。

    <div id="t6">
        <div>o</div>
        <div>p</div>
        <div>q</div>
    </div>
    <!-- 
        o p     q
    -->
    
    <style type="text/css">
       #t6{
            display: grid;
            grid-template-columns: 10px auto 30px;
        }
    </style>
    

    grid-row-gap

    grid-row-gap属性设置行与行的间隔,即行间距。

    <div id="t7">
        <div>r</div>
        <div>s</div>
        <div>t</div>
    </div>
    <!-- 
        r
    
        s
    
        t
    -->
    
    <style type="text/css">
       #t7{
            display: grid;
            grid-template-rows: 30px 30px 30px;
            grid-row-gap: 10px;
        }
    </style>
    

    grid-column-gap

    grid-column-gap属性设置列与列的间隔,即列间距。

    <div id="t8">
        <div>u</div>
        <div>v</div>
        <div>w</div>
    </div>
    <!-- 
        u  v  w
    -->
    
    <style type="text/css">
       #t8{
            display: grid;
            grid-template-columns: repeat(3,30px);
            grid-column-gap: 10px;
        }
    </style>
    

    grid-gap

    grid-gap属性是grid-column-gapgrid-row-gap的合并简写形式,如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。

    <div id="t9">
        <div>x</div>
        <div>y</div>
        <div>z</div>
        <div>A</div>
    </div>
    <!-- 
        x  y
    
        z  A
    -->
    
    <style type="text/css">
      #t9{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
            grid-gap: 10px 10px;
        }
    </style>
    

    grid-template-areas

    网格布局允许指定区域area,一个区域由单个或多个单元格组成,grid-template-areas属性用于定义区域。区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为{areaName}-start,终止网格线自动命名为{areaName}-end

    <div id="t10">
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
    </div>
    <!-- 
        B C
        D E
    -->
    
    <style type="text/css">
      #t10{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
            /* 先划分出4个单元格,然后将其定名为a到d的4个区域,分别对应这4个单元格。*/
            grid-template-areas: 'a b' 'c d';
        }
    </style>
    

    grid-auto-flow

    划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是先行后列,通过设置grid-auto-flow可以更改为先列后行,grid-auto-flow属性除了设置成rowcolumn,还可以设成row densecolumn dense,这两个值主要用于,某些项目指定位置以后,剩下的项目怎么自动放置。

    <div id="t11">
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
    </div>
    <!-- 
        F H
        G I
    -->
    
    <style type="text/css">
       #t11{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
            grid-auto-flow: column;
        }
    </style>
    

    justify-items

    justify-items属性设置成员中内容的水平位置,取值为start | end | center | stretch

    • stretch默认值:拉伸,占满单元格的整个宽度。
    • start:对齐单元格的起始边缘。
    • end:对齐单元格的结束边缘。
    • center:单元格内部居中。
    <div id="t12">
        <div>J</div>
    </div>
    <!-- 
        J
    -->
    
    <style type="text/css">
        #t12{
            display: grid;
            justify-items: center;
        }
    </style>
    

    align-items

    align-items属性设置成员中内容的垂直位置,取值为start | end | center | stretch

    • stretch默认值:拉伸,占满单元格的整个宽度。
    • start:对齐单元格的起始边缘。
    • end:对齐单元格的结束边缘。
    • center:单元格内部居中。
    <div id="t13" style="height: 50px">
        <div>K</div>
    </div>
    <!-- 
        K
    -->
    
    <style type="text/css">
        #t13{
            display: grid;
            align-items: center;
        }
    </style>
    

    place-items

    place-items属性是align-items属性和justify-items属性的合并简写形式,如果省略第二个值,则浏览器认为与第一个值相等。

    <div id="t14" style="height: 50px">
        <div>L</div>
    </div>
    <!-- 
        L
    -->
    
    <style type="text/css">
        #t14{
            display: grid;
            place-items: center center;
        }
    </style>
    

    justify-content

    justify-content属性是整个内容区域在容器里面的水平位置,也就是成员的水平分布,取值为start | end | center | stretch | space-around | space-between | space-evenly

    <div id="t15">
        <div>M</div>
        <div>N</div>
    </div>
    <!-- 
        M   N 
    -->
    
    <style type="text/css">
        #t15{
            display: grid;
            grid-template-columns: repeat(2,30px);
            justify-content: space-around;
        }
    </style>
    

    align-content

    align-content属性是整个内容区域在容器里面的垂直位置,也就是成员的垂直分布,取值为start | end | center | stretch | space-around | space-between | space-evenly

    <div id="t16" style="height: 50px;">
        <div>O</div>
        <div>P</div>
    </div>
    <!-- 
        O P
    -->
    
    <style type="text/css">
        #t16{
            display: grid;
            grid-template-columns: repeat(2,30px);
            align-content: center;
        }
    </style>
    

    place-content

    place-content属性是align-content属性和justify-content属性的合并简写形式,如果省略第二个值,则浏览器认为与第一个值相等。

    <div id="t17" style="height: 50px;">
        <div>Q</div>
        <div>R</div>
    </div>
    <!-- 
        Q   R
    -->
    
    <style type="text/css">
        #t17{
            display: grid;
            grid-template-columns: repeat(2,30px);
            place-content: center space-around;
        }
    </style>
    

    grid-auto-columns grid-auto-rows

    有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。grid-auto-columns属性和grid-auto-rows属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columnsgrid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。

    <div id="t18">
        <div style="grid-row-start: 2;grid-column-start: 2;">S</div>
    </div>
    <!-- 
         
         S
    -->
    
    <style type="text/css">
        #t18{
            display: grid;
            grid-template-columns: repeat(1,30px);
            grid-template-rows: repeat(1,30px);
            grid-auto-rows: 100px; 
            grid-auto-columns: 100px; 
        }
    </style>
    

    项目属性

    grid-column-start grid-column-end

    grid-column-start属性指定左边框所在的垂直网格线,grid-column-end属性指定右边框所在的垂直网格线。

    <div class="gridBox">
        <div style="grid-row-start: 2;grid-column-start: 2;">T</div>
    </div>
    <!-- 
         
         T
    -->
    
    <style type="text/css">
        .gridBox{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
        }
    </style>
    

    grid-row-start grid-row-end

    grid-row-start属性指定上边框所在的水平网格线,grid-row-end属性指定下边框所在的水平网格线。

    <div class="gridBox">
        <div style="grid-row-start: 2;">U</div>
    </div>
    <!-- 
         
        U
    -->
    
    <style type="text/css">
        .gridBox{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
        }
    </style>
    

    还可以给轴线命名来指定位置。

    <div class="gridBox" style="">
        <div style="grid-column-start: c2;grid-row-start: r2;">V</div>
    </div>
    <!-- 
         
          V
    -->
    
    <style type="text/css">
        .gridBox{
            display: grid;
            grid-template-columns:[c1] 30px [c2] 30px [c3]; /* 指定列并为轴线命名 */
            grid-template-rows:[r1] 30px [r2] 30px [r3]; /* 指定行并为轴线命名 */
        }
    </style>
    

    grid-column grid-row

    grid-column属性是grid-column-startgrid-column-end的合并简写形式,grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

    <div class="gridBox">
        <div style="grid-column: 2 / 3;grid-row: 2 / 3;">W</div>
    </div>
    <!-- 
         
          W
    -->
    
    <style type="text/css">
        .gridBox{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
        }
    </style>
    

    grid-area

    grid-area属性指定项目放在grid-template-areas指定的区域,还可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end的合并简写形式,直接指定项目的位置。

    <div class="gridBox" style="grid-template-areas: 'a b' 'c d';">
        <div style="grid-area: b;">X</div>
        <div style="grid-area: 2 / 2 / 3 / 3;">Y</div>
    </div>
    <!-- 
          X
          Y
    -->
    
    <style type="text/css">
        .gridBox{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
        }
    </style>
    

    justify-self align-self place-self

    justify-self属性设置单元格内容的水平位置,跟justify-items属性的用法完全一致,但只作用于单个项目,取值为start | end | center | stretch;
    align-self属性设置单元格内容的垂直位置,跟align-items属性的用法完全一致,也是只作用于单个项目,取值为start | end | center | stretch;

    • stretch默认值:拉伸,占满单元格的整个宽度。
    • start:对齐单元格的起始边缘。
    • end:对齐单元格的结束边缘。
    • center:单元格内部居中。

    place-self属性是align-self属性和justify-self属性的合并简写形式。

    <div class="gridBox">
        <div style="place-self: center end;">Z</div>
    </div>
    <!-- 
        Z
    -->
    
    <style type="text/css">
        .gridBox{
            display: grid;
            grid-template-columns: repeat(2,30px);
            grid-template-rows: repeat(2,30px);
        }
    </style>
    

    每日一题

    https://github.com/WindrunnerMax/EveryDay
    
    展开全文
  • grid布局

    2018-09-10 14:51:15
    Grid Container、Grid Item、Grid Line、Grid Track、Grid Cell、Grid Area 具体术语介绍内容很多可自行下载后面的文档学习:grid.docx 总的来说 Web 布局经历了以下四个阶段:  1、table表格布局,通过 ...

    重要术语

    Grid Container、Grid Item、Grid Line、Grid Track、Grid Cell、Grid Area
    具体术语介绍内容很多可自行下载后面的文档学习:grid.docx
    总的来说 Web 布局经历了以下四个阶段:
      1、table表格布局,通过 Dreamweaver 拖拽表格或者手写 table 标签布局
      2、float浮动及position定位布局,借助元素盒模型本身的特性以及 float position 等属性等进行布局
      3、flex弹性盒模型布局,革命性的突破,解决传统布局方案上的三大痛点 排列方向、对齐方式,自适应尺寸。是目前最为成熟和强大的布局方案
      4、grid栅格布局,二维布局模块,具有强大的内容尺寸和定位能力,适合需要在两个维度上对齐内容的布局

    展开全文
  • CSS Grid布局

    2018-07-10 19:21:15
    什么是Grid布局?  Grid布局即网格或者栅格布局,是一种基于二维网格布局系统。 一、兼容性 ie10、ie11支持带前缀-ms-   二、Grid布局 类似flex布局。grid布局分为重要的两部分,容器和子元素。 这里给父...

    什么是Grid布局?

        Grid布局即网格或者栅格布局,是一种基于二维网格布局系统。

    一、兼容性

    ie10、ie11支持带前缀-ms-

     

    二、Grid布局

    类似flex布局。grid布局分为重要的两部分,容器和子元素。 这里给父容器设置类container,子元素设置类item。

        效果如下:

     

    父容器的属性

     

        1. display: grid | inline-grid | subgrid;

     

        grid: 生成块级网格

        inline-grid: 生成行内网格

        subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小。

     

        2.设置行和列的大小grid-template-columns、grid-template-rows

            grid-template-columns:1px 10% auto ...;设置子元素的宽,值的单位可以px、rem、百分比等;同时值的个数表示列的个数

            grid-template-rows:1px 10% auto ...;设置子元素的高,值的单位可以px、rem、百分比等;同时值的个数表示行的个数

     

            例:3列*2行的6个网格

    效果:

     

    3.单元格间距grid-column-gap、 grid-row-gap、grid-gap

        grid-column-gap: 单元格列间距

        grid-row-gap:单元格行间距

        grid-gap:grid-row-gapgrid-column-gap的简写

     

    4.单元格内容宽度和左右对齐:justify-items: stretch | start | center | end;

     

        start: 左对齐。

        end: 右对齐。

        center: 居中对齐。

        stretch: 填满(默认,内容居左)。

     

     

    5. 单元格高度和上下对齐align-items: stretch|start | end | center ;

        start: 顶部对齐。

        end: 底部对齐。

        center: 居中对齐。

        stretch:填满(默认,内容居上)

     

    6.总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

     

        start: 左对齐。

        end: 右对齐。

        center: 居中对齐。

        stretch: 填满网格容器。

        space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。

        space-between: 两边对齐,网格项之间间隔相等。

        space-evenly: 网格项间隔相等

     

     

     

     

    7.总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时) align-content: start | end | center | stretch | space-around | space-between | space-evenly ;

     

        start: 顶部对齐。

        end: 底部对齐。

        center: 居中对齐。

        stretch: 填满网格容器。

        space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。

        space-between: 两边对齐,网格项之间间隔相等。

        space-evenly: 网格项间隔相等。

     

    未完待续..

    展开全文
  • css Grid 布局

    2018-05-25 11:18:46
    css Grid布局:什么是网格布局 css Grid布局: 浏览器开启css Grid Layout

    css Grid布局:什么是网格布局 

    css Grid布局: 浏览器开启css Grid Layout

    css Grid布局:网格单元格布局

    css Grid布局: 合并单元格布局  -- 例子有些属性支持的不好,有些可以优化,请自行思考解决

    css Grid布局: 显示和隐式网格线  

    css Grid布局: 网格区域

    css Grid布局: 独立源与网格的层叠顺序

    css Grid布局: 网格的流动

    Grid布局指南

    css Grid 系列(上) - Grid布局完整指南

    css Grid 系列(下) - 使用Grid布局构建网站首页


    1、单元格的布局

    grid-column-start

    grid-column-end

    grid-row-start

    grid-row-end

    grid-column: start / end

    grid-row: start / end


    2、网格区域

    grid-area: row-start / column-start / row-end / column-end


    3、在CSS Grid Layout中具有独立的源(文档流),实现任何布局效果,完全不需要考虑文档流结构的先后顺序,

    只需要根据设计需求,调整网格单元格位置。


    4、在CSS Grid Layout中盒模型大小计算变成:

    容器width = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width


    5、grid-auto-flow 默认row,设置为column时,网格中的单元将会按列显示。


    6、


    grid-gap: <grid-row-gap> <grid-column-gap>

                    如果只设置一个值,那么grid-column-gap 和 grid-row-gap都为那个值


     justify-items: start | end | center | stretch(默认) ;

    垂直于列网格线对齐,适用于网格容器里的所有网格项。
    属性值:
    start: 左对齐。
    end: 右对齐。
    center: 居中对齐。

    stretch: 填满(默认)。


    align-items: start | end | center | stretch ;
    垂直于行网格线对齐,适用于网格容器里的所有网格项。
    属性值:
    start: 顶部对齐。
    end: 底部对齐。
    center: 居中对齐。
    stretch:填满(默认)。



    展开全文
  • 页面布局之grid布局

    千次阅读 2018-02-21 17:35:20
    Grid布局 首先,从概念上来说这是一个网格布局,核心是网格容器(Grid Container)和网格项(Grid Item),也就是parent和children的关系。与flex布局相类似 网格系统引入了新的单位:分数fr,每一个fr单元分配一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,001
精华内容 21,200
关键字:

grid布局