GRID布局

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Position定位

    CSS中position属性是比较常用的元素定位方案,position常用的取值有static、relative、absolute、fixed、sticky、i...

    WindrunnerMax
  • FLEX布局

    FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。

    WindrunnerMax
  • 块级格式化上下文

    BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元...

    WindrunnerMax
  • 从零开始学习React-属性绑定(三)

    前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

    王小婷
  • VUE.js高级

    首先先更正一下昨天发送内容的错误之处,对你造成的影响深表歉意。对照昨天的文章:ajax和vue.js(此处连接方便大家查看对照)中第6部分vue的事件与函数中,...

    小闫同学啊
  • 移动端css解决图片高度无法百分比问题妙用

    用户7413032
  • 前端-组件、Prop 和 State

    如果你还记得我们在前面文章中所讨论过的,组件的概念是 React 的三大支柱之一。使用 React 开发应用基本都是在使用组件。

    grain先森
  • CSS Grid网格布局实例教程

    针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。虽然这些年 js 发展的势头正劲,盖过了 css 的发展风...

    赵帆同学GXUZF.COM
  • Hexo博客之butterfly主题优雅魔改系列(持续更新)

    相信在这之前,大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律,都是一种方式,大量修改模板(主题源文件)。这种方式的好处就是简单快速且直接,缺点就...

    Dreamy.TZK

扫码关注云+社区

领取腾讯云代金券