1.网格布局(grid):

        它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局;

2.基本概念:

        容器和项目,如图所示:

    <div class="content">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
<div class="b">7</div>
<div class="b">8</div>
<div class="b">9</div>
</div>

        .content即为容器,.b即为项目。

        行和列:

        行:row;

        列:column;

        

3.容器属性

        display:grid;            //默认是块元素;

        display:inline-grid;         //行内块元素

        指定一个容器采用网格布局;

        

        注意:设置为grid后,子元素的float,display: inline-block,display: table-cellvertical-aligncolumn-*等设置都将失效。

        

.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}

4.属性解释

        grid-template-columns:定义每一列的列宽;

        grid-template-columns:100px  100px  100px;      //总共三列,每列列宽是100px;=

        grid-template-rows:定义每一行的行高;

        grid-template-rows:100px  100px  100px;        //从上至下,每行高度为100px;

        //除了使用像素,还可以使用百分比;

        拓展:

            重复写值很麻烦,可以用repeate函数;

            repeat(次数,大小);

            例如:repeat(3,100px);            //重复3次,每次100px;

        repeat写法:

        grid-template-columns:repeat(3,100px);

        grid-template-rows:repeat(3,100px);

        也可以重复某一种不固定大小模式;

        例如:

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

        改写成:

        grid-template-columns:repeat(2,100px  80px);    //代表重复2次100px  80px的模式;也就是4列;

        等同于:

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

        如图: 

        

5.关键字

        1,auto-fill;如果容器大小不固定,项目大小固定,可以用auto-fill关键字自动填充;

        

    .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}

      

      2,fr(fraction):如果两列的宽度分别为1fr2fr,就表示后者是前者的两倍。

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, 100px 80px);
}

      

      fr也可以和px配合使用;

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 400px 1fr 2fr;
}

      

      3.minmax();

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

      解释:第一列是1fr,第二列是5fr,第三列最小值是100px,最大是1fr。当第二列fr无限大时和第三列到100px时,会往第一列借值;

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 1fr 5fr minmax(100px, 1fr);
}

      4.auto:自适应;

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px auto 100px;
}

  

6.网格线名称:

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

        解释:指定每一根网格线的名字,方便以后的引用。

        也可以有多个名字;[c1,c1a]

7.间距

      row-gap:行间距;

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
row-gap: 20px;
}

      

      colum-gap:列间距; 

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
column-gap: 20px;
}

      

      简写:

      gap:20px 20px;

      row-gapcolumn-gap简写形式;

      gap省略了第二个值,浏览器认为第二个值等于第一个值。

8.区域

  grid-template-areas:网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

        .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-areas: 'a b c' 'd e f' 'g h i';
}

 

9.放置顺序:

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

      默认是row;

      

        .content {
            box-shadow: 0 0 1px #f6f;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas: 'a b c' 'd e f' 'g h i';
            grid-auto-flow: column;
        }

      

10.单元格水平位置与垂直位置

      justify-items:属性设置单元格内容的水平位置(左中右);

      align-items:属性设置单元格内容的垂直位置(上中下);      

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

      简写:place-items

      place-items: align-items   justify-items

11.整体内容的位置:

      justify-content:整个内容区域在容器里面的水平位置(左中右);

      align-content:整个内容区域的垂直位置(上中下)。

      

      .content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-content: center;
align-content: center;
}

      简写:place-content

      place-contentalign-content   justify-content

        

CSS3中的display:grid网格布局介绍的更多相关文章

  1. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  2. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  3. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  4. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  5. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  6. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  7. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  8. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  9. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

随机推荐

  1. Python使用RMF聚类分析客户价值

    投资机构或电商企业等积累的客户交易数据繁杂.需要根据用户的以往消费记录分析出不同用户群体的特征与价值,再针对不同群体提供不同的营销策略. 用户分析指标 根据美国数据库营销研究所Arthur Hughe ...

  2. leetcode tree相关题目总结

    leetcode tree相关题目小结 所使用的方法不外乎递归,DFS,BFS. 1. 题100 Same Tree Given two binary trees, write a function ...

  3. MVC与MTV模型

    MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...

  4. Linux安装centos

    在虚拟机上安装centos 虚拟机使用win10自带的hyper-v非常好用 centos下载地址http://mirrors.aliyun.com/centos/7.6.1810/isos/x86_ ...

  5. 【LEETCODE】40、1051. Height Checker

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  6. 在KubeSphere中部署Kubeapps

    1. 情况说明 使用一台VMWare Workstation虚拟机,4核8G内存,50G磁盘 已安装KubeSphere 2.1 版本,已经按照官方文档的入门必读,示例一创建好相应的账号信息等 Kub ...

  7. gitlab用户登录与AD域用户集成

    ---恢复内容开始--- 编辑gitlab.rb文件 sudo vi /etc/gitlab/gitlab.rb 下图是我编辑的内容示例(仅供参考): 编辑以下内容: gitlab_rails['ld ...

  8. uboot使用脚本

    使用mkimage命令 # mkimage -A ARM -O linux -T script -C none -n "script" -d *.sh *.img # tftp x ...

  9. python使用tkinter无法获取输入框的值

    如果遇到:使用tkinter无法获取输入框Entty()的值的问题,需要检查一下,是否在定义Entry()时立即进行了pack() 会出现使用entryname.get()报错 解决方法:把定义和pa ...

  10. 广联达C++面经(一站式西安) - 2019秋招

    9月7号通知在广联达西安面试,早上在高新面完中兴一面就赶忙坐地铁倒公交去面试了.  一面(大概30-40min) 刚去签了一个到,就带我去面试了,在一个小型会议室,面试我的是一个女面试官(第一次碰见女 ...