grid 布局的使用
   css 网格布局,是一种二维布局系统。
   浏览器支持情况:老旧浏览器不支持,
   概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。
      <div class="container">
         <div class="item item-1"></div>
        <div class="item item-2"></div>
        <div class="item item-3"></div>
       </div>
    网格项。网格容器的子元素。
      <div class="container">
        <div class="item "></div>
         <div class="item "></div>
        <div class="item"></div>
       </div>
    网格线。组成网格线的分界线,他们可以是列网格线,也可以是行网格线
    网格轨道。两个相邻的网格线之间为网格轨道,可以认为是网格的行列或者行。
    网格单元。两个相邻的列网格线和两个相邻的网格线组成的网格单元,它是最小的网格单元。
    网格区。网格区是由任意数量网格单元组成。
  设置在网格容器上的属性
    注:当元素设置了网格布局,column、float、clear、vertical-align属性无效
    1. display: grid | inline-grid | subgrid;
      属性值: grid: 生成块级网络
      inline-grid: 生成行内网格
      subgrid: 如果容器本身是网格项,用来继承父容器的行列大小。
    

    2.grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
      grid-template-rows: <track-size> ... | <line-name> <track-size>
      设置行和列的大小。
        属性值: track-size: 轨道大小,可以使用css长度,百分比或用分数。
            line-name:网格线名字,可以选择任意名字。
          当设置行或者列大小为auto 时,网格会自动分配空间和网格名称。
        .container{
             display:grid;
             grid-template-columns: 40px 50px auto 50px 40px;
             grid-template-rows: 25% 100px auto;
           }
 
      可以给网格线定义名字.
          .container{
            display:grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start]
              50px [five] 40px [end];
             grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line]
            auto [last-line];
           }
      用fr单位可以将容器分为几等份,例如下面分成三等份
        .container{
             display:grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

    3.grid-template-areas
      通过获取网格项中的grid-area属性值(名称),来定义网格模版。
      重复网格区(grid-area)名称将跨越网格单元格,‘.’代表空网格单元。
        属性值: grid-area-name: 网格项的grid-area属性值(名字)‘.’ : 空网格单元 none: 不定义网格区域
          .item-a{ grid-area: header; }
          .item-b{ grid-area: main; }
          .item-c{ grid-area: sidebar; }
          .item-d{ grid-area: footer; }
          .container{
               display:grid;
               grid-template-columns: 50px 50px 50px 50px;
              grid-template-rows: auto;
              grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer" }
    

    4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;
        网格单元间距
        属性值:line-size: 网格线间距,设置单位值
        .container{
          display:grid;
          grid-template-columns: 100px 50px 100px;
          grid-template-rows: 80px auto 80px;
          grid-column-gap: 10px; grid-row-gap: 15px;
        }
    5. grid-gap:<grid-column-gap> <grid-row-gap>;
      是grid-column-gap 和 grid-row-gap简写。
        .container{
          display:grid;
          grid-template-columns: 100px 50px 100px;
          grid-template-rows: 80px auto 80px;
          grid-gap: 10px 15px;
        }
    6. justify-items: start | end | center | stretch(默认) ;
      垂直于列网格线对齐,适用于网格容器里的所有网格项。
        属性值:
          start: 左对齐。
          end: 右对齐。
          center: 居中对齐。
          stretch: 填满(默认)。
          .container{
             display:grid;
            justify-items: start;
           }
  

    7. align-items: start | end | center | stretch ;
        垂直于行网格线对齐,适用于网格容器里的所有网格项。
        属性值:
          start: 顶部对齐。
          end: 底部对齐。
          center: 居中对齐。
          stretch:填满(默认)。
    8. justify-content: start | end | center | stretch | space-around |
        space-between | space-evenly ;
      如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容
        器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。
      属性值: start: 左对齐。 end: 右对齐。 center: 居中对齐。
          stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
             space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。
      .container{ display:grid; justify-content: start; }

    9. align-content: start | end | center | stretch | space-around |
        space-between | space-evenly ;
      如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格
        容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。
          属性值: start: 顶部对齐。 end: 底部对齐。 center: 居中对齐。
               stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
              space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。
      .container{ display:grid; align-content: start; }
  

    10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
      自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器
      范围时,将自动创建隐式网格轨道.
      属性值:track-size: 网格轨道大小,可以是固定值,百分比或者是
      分数(fr单位)。
      .container{
          display:grid;
          grid-template-columns: 60px 60px;
          grid-template-rows: 90px 90px
       }
    

    11. grid-auto-flow : row(默认) | column | dense ;
      在没有设置网格项的位置时,这个属性控制网格项怎样排列
        属性值:
          row: 按照行依次从左到右排列。
          column: 按照列依次从上倒下排列。
          dense: 按先后顺序排列。
 
设置在网格项上的属性
    1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;    
         grid-column-end: <number> | <name> | span <number> | span <name> | auto ;    
         grid-row-start: <number> | <name> | span <number> | span <name> | auto ;    
         grid-row-end: <number> | <name> | span <number> | span <name> | auto ;
    通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的
      开始位置,grid-column-end、grid-row-end定义网格项的结束位置。
      属性值: line: 指定带编号或者名字的网格线。 span <number>: 跨越轨道的数量。
       span <name>: 跨越轨道直到对应名字的网格线。 auto: 自动展示位置,默认跨度为1。
        .item-a{
             grid-column-start: 2;
            grid-column-end: five;
             grid-row-start: row1-start grid-row-end: 3
        }
    

    2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;      
      grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
        是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。
        .item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }
    

    3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
      定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。
        属性值: name: 项目名子。 <row-start> / <column-start> / <row-end> / <column-end>:
      可以是数字或网格线名字。
        例子: 定义网格项名字:
            .item-d{ grid-area: header }
            通过网格线定位网格项:
          .item-d{
              grid-area: 1 / col4-start / last-line / 6 ;
            }
    4. justify-self: justify-self: start | end | center | stretch;
      定义单个网格项垂直于列网格线的对齐方式。
      属性值: start: 网格区域左对齐。 end: 网格区域右对齐。
           center: 网格区域居中。 stretch: 网格区域填满。
      

    5. align-self: start | end | center | stretch;
      定义单个网格项垂直于行网格线的对齐方式。
      属性值:
        start: 网格区域顶部对齐。
        end: 网格区域底部对齐。
        center: 网格区域居中。
        stretch: 网格区域填满。

grid 布局的使用的更多相关文章

  1. WPF中Grid布局

    WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...

  2. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  3. wpf后置代码中的Grid布局以及图片路径的设置

    之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...

  4. css grid布局的首次使用

    首先来看一下效果图 接下来废话不多说,先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 学习ExtJS的grid布局

    这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

  6. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局(转载)

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  7. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  8. 快速使用CSS Grid布局,实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  9. 补发————grid布局

    CSS Grid布局是CSS中最强大的布局系统.与flexbox的一位布局不同的是CSS Grid布局是一个二维布局系统,即它可以同时处理列和行.通过将CSS规则应用于父元素和其子元素,就可以轻松使用 ...

  10. tkinter之grid布局管理器详解

    在很久之前,我发过一篇<tkinter模块常用参数>,里面已经几乎涵盖了tkinter的大部分教程. 好吧,其实也就是上一篇而已啦. 所谓布局,就是指控制窗体容器中各个控件(组件)的位置关 ...

随机推荐

  1. Fundmentals in Stream Computing

    Spark programs are structured on RDDs: they invole reading data from stable storage into the RDD for ...

  2. UFW Essentials: Common Firewall Rules and Commands

    Introduction UFW is a firewall configuration tool for iptables that is included with Ubuntu by defau ...

  3. CSS布局之传统方法

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

  4. JavaScript中sort()方法

    sort()方法主要是用于对数组进行排序,默认情况下该方法是将数组元素转换成字符串,然后按照ASC码进行排序,这个大家都能理解,但如果数组元素是一个Object呢,转不了字符串,难道不能进行排序?答案 ...

  5. eclipse 出现 jar包找不到 问题记录

    同事在下载maven私服项目的时候,自动更新失败.maven 一直提示 parent 更新失败但是其他的项目都是正常的,这就奇怪了. 最后 仔细查询后,发现是  同事在下载项目时候,项目是分clien ...

  6. 调用Linux的busybox,通过linux命令来获取AndRoidIP

    //根据busybox获取本地Mac public static String getLocalMacAddressFromBusybox(){ String result = "" ...

  7. 微软在Build 2016开发者大会中发布 “认知服务”,牛津计划有正式名字啦!

    2016年3月30日:微软在Build 2016开发者大会中发布“认知服务”. 在Build 2016开发者大会中,微软发布了新的智能服务:微软认知服务(Microsoft Cognitive Ser ...

  8. SQL Server ->> 与SQL Server服务配置相关的DMV

    1) sys.dm_server_services这个DMV可以告诉我们与当前版本的SQL Server相关的服务的启动状态和最后一次启动的时间,诸如这样的信息. SELECT * FROM sys. ...

  9. tcp-full.cc

    ns2--tcp-full.cc /* -*- Mode:C++; c-basic-offset:8; tab-width:8; indent-tabs-mode:t -*- */ /* * Copy ...

  10. Fcoin和Coinex,谁更值得投资?

    2018年是数字货币市场很熊的一年,大部分币种在这一年下跌超过了90%.但是这一年对于数字货币的发展也是不平凡的,可以说是至关重要的一年.通证经济商业模型在这一年萌芽,并茁壮成长,2018是通证经济元 ...