grid_gridview - CSDN
精华内容
参与话题
  • 前端基础知识(grid布局)

    千次阅读 2019-03-20 22:05:25
    参考链接 grid布局简介 CSS Grid(网格)布局,是一个二维的基于网络的布局系统。Flexbox 的出现很大程度上改善了我们的布局方式,但它的目的是为了解决更简单的一维...采用grid布局的元素,被称为grid容器(grid...

    参考链接

    grid布局简介

    • CSS Grid(网格)布局,是一个二维的基于网络的布局系统。Flexbox 的出现很大程度上改善了我们的布局方式,但它的目的是为了解决更简单的一维布局,而不是复杂的二维布局(实际上 Flexbox 和 Grid 能协同工作,而且配合得非常好)。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块
    • 采用grid布局的元素,被称为grid容器(grid container),简称“容器”。其所有直接子元素(直接子元素的子元素不包含在内)自动成为容器成员,称为grid项目(grid item),简称“项目”

    相关术语

    Grid Container

    • 设置了 display: gird 的元素。 这是所有 grid item 的直接父项。 在下面的例子中,.container 就是是 grid container
    <div class="container">
      <div class="item item-1"></div>
      <div class="item item-2"></div>
      <div class="item item-3"></div>
    </div>
    

    Grid Item

    • Grid 容器的孩子(直接子元素)。下面的 .item 元素就是 grid item,但 .sub-item不是
    <div class="container">
      <div class="item"></div> 
      <div class="item">
        <p class="sub-item"></p>
      </div>
      <div class="item"></div>
    </div>
    

    Grid Line

    • 这个分界线组成网格结构。 它们既可以是垂直的(“column grid lines”),也可以是水平的(“row grid lines”),并位于行或列的任一侧。 下面例子中的黄线就是一个列网格线
      示意图

    Grid Track

    • 两个相邻网格线之间的空间。 可以把它们想象成网格的列或行。 下面是第二行和第三行网格线之间的网格轨道
      示意图

    Grid Cell

    • 两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。 下面是行网格线1和2之间以及列网格线2和3的网格单元
      示意图

    Grid Area

    • 四个网格线包围的总空间。 网格区域可以由任意数量的网格单元组成。 下面是行网格线1和3以及列网格线1和3之间的网格区域
      在这里插入图片描述

    Grid 属性列表

    Grid Container 的全部属性

    • display
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • grid-template
    • grid-column-gap
    • grid-row-gap
    • grid-gap
    • justify-items
    • align-items
    • justify-content
    • align-content
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow
    • grid

    Grid Items 的全部属性

    • grid-column-start
    • grid-column-end
    • grid-row-start
    • grid-row-end
    • grid-column
    • grid-row
    • grid-area
    • justify-self
    • align-self

    容器(grid container)的属性

    display属性

    • 将元素定义为grid container,并为其内容建立新的网格格式化上下文(grid formatting context),属性值有2个:
      • grid :生成一个块级(block-level)网格
      • inline-grid:生成一个行级(inline-level)网格
    .container{
    	display: grid | inline-grid;
    }
    

    grid-template-columns/grid-template-rows属性

    • 使用以空格分隔的多个值来定义网格的行和列,这些值表示网格轨道(Grid Track) 大小,它们之间的空格表示网格线,属性值为:
    .container {
    	grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    	grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
    }
    
    • 例:如果没有给网格线命名,轨道值之间仅有空格时,网格线会被自动分配数字名称:
    .container{
    	grid-template-columns: 40px 50px auto 50px 40px;
    	grid-template-rows: 25% 100px auto;
    }
    

    示意图

    • 例:给网格线指定确切的命名:
    .cotainer{
       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];
    }
    

    示意图

    • 注意:一个网格线可以有不止一个名字,例如,这里第2条网格线有两个名字:row1-end 和 row2-start:
    .container{
       grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
    }
    
    • 如果定义中包含重复的部分,可以使用repeat()来简化写法:
    .container{
    	grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px 5%;
    }
    /*可简写以上代码为如下代码*/
    .container{
    	grid-template-columns: repeat(3 [col-start] 20px) 5%;
    }
    
    • fr单元允许等分网格容器剩余可用空间来设置网络轨道的大小。例如,下面的代码会将每个网格项设置为网格容器宽度的三分之一:
    .container{
    	grid-complate-columns: 1fr 1fr 1fr;
    }
    
    • 剩余可用空间是除去所有非灵活网格项之后计算得到的。例:可用空间总量减去50px后。再给fr单元的值3等分:
    .container{
    	grid-complate-columns: 1fr 50px 1fr 1fr;
    }
    

    grid-template-areas属性

    • 通过引用grid-area属性指定的网格区域的名称来定义网络模板,重复网格区域的名称会使内容扩展到这些单元格(不理解可先看示例代码)。这个语法本身可看做网格的可视化结构。属性值只有3个:
      • <grid-area-name>:由网格项grid-area指定的网格区域名称
      • .点号:代表一个空的网格单元
      • none:不定义网格区域
    • 示例:创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行由footer区域组成
    .item-a{
    	grid-area: header;
    }
    .item-b{
    	grid-area: main;
    }
    .item-c {
    	grid-area: sidebar;
    }
    .item-d {
    	grid-area: footer;
    }
    .container{
    	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";
    }
    

    示意图

    • 声明中的每一行都需要有相同数量的单元格,可以使用任意数量的.来声明单个空单元格。需要注意的是,不是在用这个语法命名单元格,而是在命名区域,使用这个语法时,实际上区域两端的网格线是自动命名的。 比如,如果网格区域的名称是foo,那么区域的起始的行网格线和列网格线名称是 foo-start,并且区域终点的行网格线和列网格线名称是 foo-end。 这意味着某些网格线可能有多个名称,比如上面的例子中最左边的一条网格线有三个名字:header-start,main-start 和 footer-start。

    grid-template属性

    • 在单个声明中定义grid-template-columnsgrid-template-rowsgrid-template-areas的简写,例:
    .container{
    	grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
      	grid-template-columns: auto 50px auto;
      	grid-template-areas: 
        	"header header header" 
        	"footer footer footer";
    }
    /*以上代码可简写为以下代码*/
    .container{
    	grid-template:
    		[row1-start] "header header header" 25px [row1-end];
    		[row2-start] "footer footer footer" 25px [row2-end];
    		/ auto 50px auto;
    }
    
    • 注意:由于 grid-template 不会重置隐式网格属性(grid-auto-columnsgrid-auto-rowsgrid-auto-flow),而这可能在大多数情况是必要的,因此建议使用grid属性来代替grid-template

    grid-column-gap/grid-row-gap属性

    • 指定网格线的大小,可以想象为设置列/行之间的间距宽度,属性值为<line-size>,一个长度值,例:
    .container{
    	grid-template-columns: 100px 50px 100px;
    	grid-template-rows: 80px auto 80px;
    	grid-column-gap: 10px;
    	grid-rows-gap: 15px;
    }
    
    • 效果图(注意:只能在列/行之间创建缝隙,而不是在外部边缘创建):
      效果图

    gird-gap属性

    • grid-row-gapgrid-column-gap 的简写
    .container{
    	grid-gap: <grid-row-gap> <grid-column-gap>;
    }
    
    • 如果属性值只设置了一个值,则 grid-row-gap与 grid-column-gap 被设置为相同的值

    justify-items/align-items属性

    • 沿着行/列轴对齐网格内的内容,适用于容器内的所有的grid items,属性值有四个:
      • start:内容与网格区域的左端/顶端对齐
        行
      • end:内容内容与网格区域的右端/底部对齐
        行
      • center:内容位于网格区域的中间/垂直中心位置
        行
      • stretch(默认值):内容宽度/高度占据整个网格区域空间
        行

    place-items属性

    • 设置 align-itemsjustify-items 的简写
    .container{
    	place-items: <align-items> <justify-items>;
    }
    
    • 如果省略第二个值,则将第一个值同时分配给这两个属性

    justify-content/align-content属性

    • 如果所有的grid items都使用像px这样的非弹性单位来设置大小,则可能出现网格总大小小于其容器的大小,此时,可以设置网格容器的内的网格对齐方式,沿着行/列轴对齐网格,属性值有7个:
      • start:网格与网格容器的左边/顶部对齐
        行
      • end:网格与网格容器的右边/底部对齐
        行
      • center:网格与网格容器的中间对齐
        行
      • stretch:调整grid item 的大小,让宽度/高度填充整个网格容器
        行
      • space-around:在 grid item 之间设置均等宽度/高度的空白间隙,其外边缘间隙大小为中间空白间隙宽度的一半
        行
      • space-between:在 grid item 之间设置均等宽度/高度空白间隙,其外边缘无间隙
        行
      • space-evenly:在每个 grid item 之间设置均等宽度/高度的空白间隙,包括外边缘
        行

    place-content属性

    • 设置 align-contentjustify-content 的简写
    .container{
    	place-content: <align-content> <justify-content>;
    }
    
    • 如果省略第二个值,则将第一个值同时分配给这两个属性

    grid-auto-columns/grid-auto-rows属性

    • 指定自动生成的网格轨道(又名隐式网格轨道)的大小。隐式网格轨道在你显式的定位超出指定网格范围的行或列时被创建,属性值<track-size>可以是一个长度值、一个百分比值或一个自由空间的一部分(fr
    • 创建隐式网格轨道示例代码:
      • 首先创建一个2x2的网格
        .container {
        	grid-template-columns: 60px 60px;
        	grid-template-rows: 90px 90px
        }
        
        示意图
      • 然后使用grid-columngrid-row来定位你的网格项目
      .item-a{
      	grid-column: 1 / 2;
      	grid-row: 2 / 3;
      }
      .item-b{
      	grid-column: 5 / 6;
      	grid-row: 2 / 3;
      }
      
      示意图
      • 这里指定 .item-b开始于列网格线 5 并结束于在列网格线 6,但并未定义列网格线 5 或 6。因为引用了不存在的网格线,宽度为0的隐式轨道就会被创建用于填补间隙。可以使用 grid-auto-columnsgrid-auto-rows属性来指定这些隐式轨道的宽度:
      .container{
      	grid-auto-columns: 60px;
      }
      
      示意图

    grid-auto-flow属性

    • 如果有一些没有明确放置在网格上的grid item,自动放置算法会自动放置这些网格项,该属性则用于控制自动布局算法的工作方式,属性值有3个:
      • row(默认值):告诉自动布局算法依次填充每行,根据需要添加新行
      • column:告诉自动布局算法依次填充每列,根据需要添加新列
      • dense:告诉自动布局算法,如果后面出现较小的 grid item,则尝试填充在网格中较早的空缺
    • 注意:dense 只会更改网格项的可视顺序,并可能导致它们出现乱序,这对可访问性不利
    • 例,有如下html:
    <section class="container">
    	<div class="item-a">item-a</div>
    	<div class="item-b">item-b</div>
    	<div class="item-c">item-c</div>
    	<div class="item-d">item-d</div>
    	<div class="item-e">item-e</div>
    </section>
    

    定义一个有5列2行的网格,并将grid-auto-flow设置为row

    .container {
    	display: grid;
    	grid-template-columns: 60px 60px 60px 60px 60px;
    	grid-template-rows: 30px 30px;
    	grid-auto-flow: row;
    }
    

    把 grid item 放在网格上时,只设置其中两个固定的位置:

    .item-a {
    	grid-column: 1;
    	grid-row: 1 / 3;
    }
    .item-e {
    	grid-column: 5;
    	grid-row: 1 / 3;
    }
    
    • 因为将grid-auto-flow设置为row,所以以上代码效果图如下所示:
      示意图
    • 如果将grid-auto-flow设置为column,代码与示意图如下:
    .container {
    	display: grid;
    	grid-template-columns: 60px 60px 60px 60px 60px;
    	grid-template-rows: 30px 30px;
    	grid-auto-flow: column;
    }
    

    示意图

    grid属性

    • 在单个属性中设置所有以下属性的简写:grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow(注意:只能在单个网格声明中指定显式或隐式网格属性)。属性值:
      • none:将所有子属性设置为其初始值
      • <grid-template>:与grid-template 简写的工作方式相同
      • <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] :接受所有与grid-auto-flowgrid-auto-rowsgrid-auto-columns相同的值。 如果省略grid-auto-columns,则将其设置为为grid-auto-rows指定的值。 如果两者都被省略,则它们被设置为它们的初始值
    • 例,以下代码写法等价:
    .container {
    	grid: 200px auto / 1fr auto 1fr;
    }
    .container {
    	grid-template-rows: 200px auto;
    	grid-template-columns: 1fr auto 1fr;
    	grid-template-areas: none;
    }
    
    • 例,以下代码写法等价:
    .container {
    	grid: column 1fr / auto;
    }
    .container {
    	grid-auto-flow: column;
    	grid-auto-rows: 1fr;
    	grid-auto-columns: auto;
    }
    
    • 也可用使用一个更复杂但相当方便的语法来一次设置所有内容。可以指定 grid-template-areasgrid-template-rows以及 grid-template-columns,并将所有其他子属性设置为其初始值。
    • 例,在网格区域内,指定网格线名称和内联轨道大小:
    .container {
    	grid: 
    	[row1-start] "header header header" 1fr [row1-end]
     	[row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
    }
    

    以上代码等价于:

    .container {
    	grid-template-areas: 
    		"header header header"
    		"footer footer footer";
    	grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
    	grid-template-columns: auto 50px auto;    
    }
    

    项目(Grid Items)的属性

    grid-column-start/grid-column-end/grid-row-start /grid-row-end属性

    • 使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start属性表示grid item的网格线的起始位置,grid-column-end/grid-row-end属性表示网格项的网格线的终止位置,属性值有:
      • <line>:可以是一个数字来指代相应编号的网格线,也可以使用名称指代相应命名的网格线
      • span<number>:网格项将跨越指定数量的网格轨道
      • span<name>:网格项将跨越一些轨道,直到碰到指定命名的网格线
      • auto:自动布局,或者自动跨越,或者跨越一个默认的轨道
    • 举例:
    .item-a{
    	grid-column-start: 2;
    	grid-column-end: five;
    	grid-row-start: row1-start;
    	grid-row-end: 3;
    }
    

    示意图

    .item-b{
    	grid-column-start: 1;
    	grid-column-end: span col4-start;
    	grid-row-start: 2;
    	grid-row-end: span 2;
    }
    

    示意图

    • 如果没有声明 grid-column-end / grid-row-end,默认情况下,该网格项将跨越1个轨道
    • 网格项可以相互重叠,可以使用z-index来控制它们的堆叠顺序

    grid-column/grid-row属性

    • grid-column-start+ grid-column-end,和grid-row-start+ grid-row-end 的简写形式,属性值为<start-line> / <end-line>,每个值的用法都和属性分开写时的用法一样,例:
    .item-c{
    grid-column: 3 / span 2;
    grid-row: third-line / 4;
    }
    

    示意图

    • 如果没有指定结束行值,则该网格项默认跨越1个轨道

    grid-area属性

    • 给 grid item 进行命名以便于使用 grid-template-areas属性创建模板时来进行引用。另外也可以做为 grid-row-start+ grid-column-start+ grid-row-end+ grid-column-end 的简写形式。属性值有:
      • <name>:对区域的命名
      • <row-start> / <column-start>/<row-end> / <column-end>:可以是数字,也可以是网格线的名字
    • 举例:
    /*给一个网格项命名*/
    item-d{
    	grid-area: header;
    }
    
    /*简写*/
    .item-d{
    	grid-area: 1 / col4-start / last-line / 6;
    }
    

    示意图

    justify-self/align-self属性

    • 沿着行/列轴对齐grid item 里的内容。此属性对单个网格项内的内容生效,属性值:
      • start:将内容对齐到网格区域的左端/顶部
        示意图
        示意图
      • end:将内容对齐到网格区域的右端/底部
        示意图
        示意图
      • center:将内容对齐到网格区域的中间
        示意图
        示意图
      • stretch(默认值):填充网格区域的宽度/高度
        示意图
    • 要为网格中的所有grid items 设置对齐方式,也可以通过justify-items /align-items属性在网格容器上设置此行为

    place-self属性

    • 是设置 align-selfjustify-self 的简写形式
    .container{
    	place-content: <align-self> <justify-self> | auto;
    }
    
    • 如果省略第二个值,则将第一个值同时分配给这两个属性
    展开全文
  • grid布局

    2020-04-16 23:15:00
    grid grid 网格布局 添加在容器身上的 1 display:grid; inline-grid 触发网格布局 2 划分行和列 grid-template-columns:; grid-template-ro...

    grid

          grid  网格布局  
    
            添加在容器身上的
            1   display:grid;    inline-grid   触发网格布局
    
    
            2   划分行和列  
                 
                    grid-template-columns:;
                    grid-template-rows:;
    
                                   属性值可以跟 px  /  百分比
    
            3   关键字
             
                   repeat(重复的次数  重复的值)  比如 grid-template-rows:repeat(3,200px);  重复三次每次200px
                   
                   aotu-fill  自动填充  grid-template-rows:repeat(auto-fill,200px);
                   
                   fr关键字  (列宽片段) 每列元素成比例分配
    
                   minmax   子元素的列宽的最小值 和最大值
    
                   auto     子元素分配 剩余父元素的宽度
    
            4   网格间距  
    
                 grid-column-gap:;  
                 grid-column-gap:;  
                 grid-gap:;    下 右
    
            5   网格线名称  
                      grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
                      grid-template-rows:[r1] 100px [r2] 100px [r3] auto [r4];
    
    
            6   grid-area  需要给子元素起名字 
    
                grid-template-areas: "a b c"
                                     "d e f"
                                     "g o p";
            
            7   设置子元素在容器中的排列方式
    
                grid-auto-flow:;   
                                row
                                column
    
            8   设置子元素中内容的排列方式
                 justify-items 
                 align-items
                 place-itesm       
                              center/start/end/stretch
    
            9   设置子元素在容器中的排列方式
                 justify-content
                 align-content
                 place-content      
                              center/start/end/stretch /space-between/ space-around
              
                写在子元素身上              
            10   grid-column:1/3;  从开始的第一条网格线到第三条网格线
    
    展开全文
  • Grid布局简介

    2019-05-13 11:39:44
    Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。 轻松使用 Grid 布局提高开发效率,对复杂的网页结构布局更加灵活。 一、概述 Grid 将网页划分成一个个网格,可以任意组合不同的网格,...

    Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。

    轻松使用 Grid 布局提高开发效率,对复杂的网页结构布局更加灵活。


    一、概述

    Grid 将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。网格是一组相交的水平线和垂直线,它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

    我们比较熟悉的比如说坐标轴,坐标点;如果你看到上面这样一个网格首先想到是这不就是被淘汰的表格吗,表格之所以被淘汰最主要在性能方面,然而我们不得不承认表格对于整个网页的布局来说有一定的便利性。那么现在的网格布局就可以把表格里面的一些较好的方便的东西抽出来,然后把性能方面较差的地方去掉,所以说网格布局会成为将来互联网企业的一个热潮是有原因的。

    网格布局的优势

    固定的位置和弹性的轨道的大小
    

    你可以使用固定的轨道尺寸创建网格,比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。

    元素位置
    

    你可以使用行号、行名或者标定一个网格区域来精确定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。

    创建额外的轨道来包含元素
    

    可以使用网格布局定义一个显式网格,但是根据规范它会处理你加在网格外面的内容,当必要时它会自动增加行和列,它会尽可能多的容纳所有的列。

    对齐控制
    

    网格包含对齐特点,以便我们可以控制一旦放置到网格区域中的物体对齐,以及整个网格如何对齐。

    控制重叠内容
    

    多个元素可以放置在网格单元格中,或者区域可以部分地彼此重叠。然后可以CSS中的z-index属性来控制重叠区域显示的优先级。

    Grid vs Flexbox

    Grid 布局与 Flex布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid布局远比Flex布局强大。不是说Grid布局取代Flex布局,实际上他俩可以很好的配合使用。

    浏览器兼容

    二、重要术语

    网格容器(Grid Container)

    元素应用display:grid;,它是其所有网格项的父元素。

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    

    把 container 元素变成一个 grid(网格),只要把其 display 设置为 grid。

    CSS代码:

    .container {
        display:grid;
    }
    

    网格项(Grid Item)

    网格容器的子元素,下面的item元素是网格项。

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    

    网格线(Grid Line)

    组成网格项的分界线。

    记住:网格线仅仅是我们在定义网格容器的时候就产生的,跟我们的网格项没有直接的关联。网格线是我们在定义网格容器的时候伴随出来的虚拟的概念,也就是说在实际的HTML中是找不到这些线的。

    网格轨道(Grid Track)

    两个相邻的网格线之间为网格轨道。

    网格轨道的特点是一定会顶到容器的边缘。
    网格轨道必然跟网格项没有关联。

    网格单元(Grid Cell)

    两个相邻的列网格线和两个相邻的行网格线组成的是网格单元。

    网格区域(Grid Area)

    4个网格线包围的总空间。

    三、容器中的属性

    1、dislpay属性

    display:grid | inline-grid | subgrid;

    将元素定义为grid container,并为其内容建立新的网格格式化上下文(grid formatting context)。

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    
    .container {
        display:grid | inline-grid | subgrid;
    }
    
    • grid:生成块级网格。
    • inline-grid:生成行内网格。
    • subgrid:如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小。
    注意

    当元素设置了网格布局,column、float、clear、vertical-align属性无效。
    display:subgrid;目前所有浏览器都不兼容。

    2、grid-template属性

    1)grid-template-columns / grid-template-rows

    使用以空格分隔的多个值来定义网格的列和行。

    .container {
      grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
      grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
    }
    
    注意:此属性用在容器(container)上面。
    • 轨道大小 track-size: 可以使用css长度(px、em等)、百分比、或用分数(用 fr 单位)
    • 网格线名字 line-name:可以选择任何名字

    2)grid-template-areas

    通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。

    .container {
      grid-template-areas: none|
        "grid-area-name|. grid-area-name|. grid-area-name|. ..."
        "grid-area-name|. grid-area-name|. grid-area-name|. ..."
        "......";
    }
    
    • grid-area-name:使用 grid-area 属性设置的网格区域的名称
    • “.”:点号代表一个空网格单元
    • none:没有定义网格区域

    例如:

    .container {
      grid-template-areas: 
        "head head head head"
        "main main . sidebar"
        "foot foot foot foot";
    }
    

    以上例子强调以下几点:

    第一:每一行都一定要用双引号括起来;

    第二:每一个值对应一个网格单元,千万不要上面写了4个,下面只写三个,这样的话就会出问题;

    第三:每个网格单元里的区域名称都以空格隔开;

    第四:每个引号后面是没有任何逗号或封号,仅仅是回车换行。

    grid-template

    在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas的简写。就个人而言,还是不要简写,因为简写之后可读性会变差一些。

    .container {
      grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
    }
    
    • none:将三个属性都设置为其初始值。所谓初始值默认为一行一列一个区域,也就是说回归到块元素本质,就是一个块。网格布局某些方面来说就是把我们的一个块给它用一种格子的形式把他区分为多个格子,也可以理解成是多个块。
    • subgrid:把 grid-template-rows 和 grid-template-columns 设置为subgrid,并且 grid-template-areas 设置为初始值。简单强调一下,第一:所谓的把行跟列设置为subgrid就是说还是得自己定义一下行和列,都自己定义了,就不必再简写了;第二:把网格区域定义为初始值,就是每个区域的大小都是一个网格单元,如果是这样其实就没必要去定义它。subgrid是目前为止所有浏览器都不兼容,那么在这里它依然适用,所以跟大家说一下:不推荐大家使用,只需了解知道即可。
    • grid-template-rows / grid-template-columns:把 grid-template-rows 和 grid-template-columns 设置为指定值,与此同时,设置 grid-template-areas 为none
    .container {
      grid-template:
        [row1-start] "head head head" 25px [row1-end]
        [row2-start] "foot foot foot" 25px [row2-end]
        / auto 50px auto;
    }
    

    等同于

    .container {
      grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
      grid-template-columns: auto 50px auto;
      grid-template-areas: 
        "head head head" 
        "foot foot foot";
    }
    

    不建议简写,避免混淆。

    3、gap属性

    grid-column-gap / grid-row-gap

    指定网格线的大小,可以想象为设置列/行之间间距的宽度。也可以说是网格轨道之间的间距

    .container {
      grid-column-gap: <line-size>;
      grid-row-gap: <line-size>;
    }
    
    • line-size:一个长度值

    grid-gap

    grid-row-gap 和 grid-column-gap 的缩写。

    .container {
      grid-gap: <grid-row-gap> <grid-column-gap>;
    }
    
    说明

    起初是用 grid-gap 属性来定义的,目前逐渐被 gap 替代。
    如果没有指定 grid-row-gap,则会被设置为与 grid-column-gap 相同的值。

    4、items属性

    justify-items

    沿着行轴对齐网格内的内容。

    .container {
      justify-items: start | end | center | stretch;
    }
    
    • start:内容与网格区域的左端对齐
    • end:内容与网格区域的右端对齐
    • center:内容位于网格区域的中间位置
    • stretch:内容宽度占据整个网格区域空间(这是默认值)

    align-items

    沿着列轴对齐网格内的内容。

    .container {
      align-items: start | end | center | stretch;
    }
    
    • start:内容与网格区域的顶端对齐
    • end:内容与网格区域的底部对齐
    • center:内容位于网格区域的垂直中心位置
    • stretch:内容高度占据整个网格区域空间(这是默认值)

    place-items

    设置 justify-items 和 align-items 的简写形式。
    注意:书写顺序为先列轴属性值后行轴属性值。

    .container {
      place-items: center;
    }
    

    以上表示水平和垂直居中。

    5、content属性

    justify-content

    设置网格容器内的网格沿着行轴对齐网格的对齐方式。

    .container {
      justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
    }
    
    • start:网格与网格容器的左边对齐
    • end:网格与网格容器的右边对齐
    • center:网格与网格容器的中间对齐
    • stretch:调整 grid item 的大小,让宽度填充整个网格容器
    • space-around:在 grid item 之间设置均等宽度的空白间隙,其外边缘间隙大小为中间空白间隙宽度的一半
    • space-between:在 grid item 之间设置均等宽度的空白间隙,其外边缘无间隙
    • space-evenly:在每个 grid item 之间设置均等宽度的空白间隙,包括外边缘

    align-content

    设置网格容器内的网格沿着列轴对齐网格的对齐方式。

    .container {
      align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
    }
    
    • start:网格与网格容器的顶部对齐
    • end:网格与网格容器的底部对齐
    • center:网格与网格容器的中间对齐
    • stretch:调整 grid item 的大小,让高度填充整个网格容器
    • space-around:在 grid item 之间设置均等高度的空白间隙,其外边缘间隙大小为中间空白间隙宽度的一半
    • space-between:在 grid item 之间设置均等高度的空白间隙,其外边缘无间隙
    • space-evenly:在每个 grid item 之间设置均等高度的空白间隙,包括外边缘

    place-content

    设置 align-content 和 justify-content 的简写形式。
    注意:书写顺序为先列轴对齐属性值后行轴对齐属性值。

    6、grid-auto属性

    grid-auto-columns / grid-auto-rows

    指定自动生成的网格轨道(又名隐式网格轨道)的大小。

    隐式网格轨道

    隐式网格轨道在显示的定位超出指定网格范围的行或列时被创建。也就是说网格项超出,一种是太多了,还有一种分两种情况:如果说仅仅因为太多的话,我们只需要控制行就可以了,列这一块的话肯定是跟着上面是一样的。但是有时列也会超出,超出情况会在讲到网格项的地方提到过,当网格项确定在网格单元或网格区域的时候是可以控制的,控制的时候除了网格区域的名字之外,它也可以通过地址条网格线来控制,但是这个线的名字如果是超过的时候就会出来,那么在这种情况下就会自动生成隐式网格轨道。

    隐式网格轨道个人是不建议大家使用的,因为我们的这个隐式网格我们在容器当中一般来说我们在容器中统揽大局然后抠出局部,结果局部不由大局控制反而影响大局,这就有点反客为主,喧宾夺主的意思了,那在控制起来势必会有混乱,所以隐式网格轨道不是特别提倡大家使用。

    .container {
      grid-auto-columns: <track-size> ...;
      grid-auto-rows: <track-size> ...;
    }
    
    • track-size:可以是一个长度值,一个百分比,或者一个自由空间的一部分(使用 fr 单位)

    grid-auto-flow

    控制自动布局算法的工作方式。

    .container {
      grid-auto-flow: row | column | row dense | column dense
    }
    
    • row:告诉自动布局算法依次填充每行,根据需要添加新行 (默认)
    • column:告诉自动布局算法依次填充每列,根据需要添加新列
    • dense:告诉自动布局算法,如果后面出现较小的 grid item,则尝试在网格中填充空洞
    注意:dense 只会更改网格项的可视顺序,并可能导致它们出现乱序,这对可访问性不利。

    7、grid属性

    在单个属性中设置所有以下属性的简写: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。

    当然像左对齐、右对齐这些对齐方式等就不能简写在上面。就是说我们可以把多少行多少列以及它的区域还有隐式轨道以及他的布局方式都可以简写到 grid 里面并且同时将 sets grid-column-gap 和 grid-row-gap设置为他们的初始值,即使它们不能被此属性显示设置。

    .container {
      grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
    }
    
    • none:将所有子属性设置为其初始值。
    • grid-template-rows / grid-template-columns:将 grid-template-rows 和 grid-template-columns 分别设置为指定值,将所有其他子属性设置为其初始值
    • grid-auto-flow [grid-auto-rows [/ grid-auto-columns]]:接受所有与 grid-auto-flow,grid-auto-rows 和 grid-auto-columns 相同的值。如果省略 grid-auto-columns,则将其设置为 grid-auto-rows指定的值。如果两者都被省略,则它们被设置为它们的初始值
    .container {
      grid: [row1-start] "head head head" 1fr [row1-end]
            [row2-start] "foot foot foot" 25px [row2-end]
            / auto 50px auto;
    }
    

    等价于:

    .container {
      grid-template-areas: 
        "head head head"
        "foot foot foot";
      grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
      grid-template-columns: auto 50px auto;    
    }
    

    简写形式就简单的做一个介绍,实际开发当中不建议简写形式。

    四、CSS函数

    • repeat()
    • fit-content()
    • minmax()

    1、repeat()

    重复

    跟踪列表的重复片段,允许大量显示重复模式的列或行以更紧凑的形式编写。

    .container {
      grid-template-columns: repeat(repeat, values);
      grid-template-rows: repeat(repeat, values);
    }
    
    可用范围:这个函数可以用在 CSS Grid 属性 grid-template-columns 和 grid-template-rows。

    重复次数

    • number:整数,确定确切的重复次数。
    • auto-fill:以网格项为准自动填充。
    • auto-fit:以网格容器为准自动填充。

    • length:非负长度。
    • percentage:相对于列轨道中网格容器的内联大小的非负百分比,以及行轨道中网格容器的块长度。
    • flex:单位为 fr 的非负维度,指定轨道弹性布局的系数值。
    • max-content:表示网格的轨道长度自适应内容最大的那个单元格。
    • min-content:表示网格的轨道长度自适应内容最小的那个单元格。
    • auto:作为最大值时,等价于 max-content。作为最小值时,它表示轨道中单元格最小长宽(由min-width/min-height)的最大值。

    2、fit-content()

    内容适配

    根据公式min(最大大小、最大值(最小大小、参数))将给定大小夹紧为可用大小。

    .container {
      grid-template-columns: fit-content([ <length> | <percentage> ]);
      grid-template-rows: fit-content([ <length> | <percentage> ]);
    }
    

    • length:一个绝对的长度。
    • percentage:相对于给定轴上可用空间的百分比。

    3、minmax()

    长宽范围

    定义了一个长宽范围的闭区间。

    minmax([ <length> | <percentage> | <flex> | min-content | max-content | auto ],
    [ <length> | <percentage> | <flex> | min-content | max-content | auto ]);
    

    值(跟repeat的取值是一样的)

    • length:非负长度。
    • percentage:相对于列轨道中网格容器的内联大小的非负百分比,以及行轨道中网格容器的块长度。
    • flex:单位为 fr 的非负维度,指定轨道弹性布局的系数值。
    • max-content:表示网格的轨道长度自适应内容最大的那个单元格。
    • min-content:表示网格的轨道长度自适应内容最小的那个单元格。
    • auto:作为最大值时,等价于 max-content。作为最小值时,它表示轨道中单元格最小长宽(由min-width/min-height)的最大值。

    例如:

    .container {
      grid-template-columns: minmax(300px, 50px);
    }
    

    minmax()这个函数前面‘300px’是最小值,后面‘50px’是最大值,也就是说范围是从小到大的。当最小值大于最大值时,最大值将被忽略,整列会成为最小值。

    五、网格项上的属性

    • start / end :规定每一个网格项在那个区域当中

    • grid-area:跟网格区域一样

    • self:自身里面的对齐方式

    start / end 和 grid-area 两个属性都是规划出一个网格区域,把网格项放在一个网格区域里面,唯一不同的是 start / end 是通过网格线来规划出网格区域,而 grid-area 是通过网格区域在并列网格容器当中时就定义好的网格区域,然后直接来读取这个网格区域就可以了。

    1、start / end 属性

    grid-column-start / grid-column-end / grid-row-start / grid-row-end

    使用特定网格线来确定 网格项(grid item)在网格内的位置。

    .item {
      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
    }
    
    属性值
    • line :可以是一个数字来指代相应编号的网格线,也可使用名称指代相应命名的网格线
    • span number :网格项将跨越指定数量的网格轨道
    • span name :网格项将跨越一些轨道,直到碰到指定命名的网格线
    • auto:自动布局,或者自动跨度,或者跨越一个默认的轨道
    说明
    • 如果没有声明 grid-column-end / grid-row-end,默认情况下,该网格项将跨越1个轨道。

    • 网格项可以相互重叠。可以使用 z-index 来控制它们的堆叠顺序。

    grid-column / grid-row

    grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的简写形式。

    .item {
      grid-column: <start-line> / <end-line> | <start-line> / span <value>;
      grid-row: <start-line> / <end-line> | <start-line> / span <value>;
    }
    

    个人建议:斜杠前后的空格千万不要省略,有时可以识别,有时不可识别,对于浏览器来说小版本的话就会有差别。建议斜杠前后都要有空格。

    属性值

    start-line / end-line:每个值的用法都和属性分开写时的用法一样

    例如:

    CSS代码如下:

    .container > .item:nth-child(1) {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4;
    }
    

    等同于

    .container > .item:nth-child(1) {
        grid-column: 2 / 4;
        grid-row: 2 / 4;
    }
    

    等同于

    .container > .item:nth-child(1) {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
    }
    

    2、grid-area 属性

    网格区域

    给 gird item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用。

    .item {
      grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
    }
    
    属性值
    • name :grid-template-areas 中定义的命名
    • row-start / column-start / row-end / column-end:可以是数字,也可以是网格线的名字
    例如:

    CSS代码如下:

    .container > .item-a {
        grid-area: row1-start / 2 / 3 / five;
    }
    

    等同于

    .container > .item-a {
        grid-column-start: 2;
        grid-column-end: five;
        grid-row-start: row1-start;
        grid-row-end: 3;
    }
    

    例如:

    CSS代码如下:

    .container > .item-a {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
    }
    

    等同于

    .container > .item-a {
        grid-area: 2 / 2 / 4 / 4;
    }
    

    3、self 属性

    justify-self

    沿着行轴对齐 grid-item 里的内容。

    .item {
      justify-self: start | end | center | stretch;
    }
    
    属性值
    • start:将内容对齐到网格区域的左端
    • end:将内容对齐到网格区域的右端
    • center:将内容对齐到网格区域的中间
    • stretch:填充网格区域的宽度(这是默认值)

    align-self

    沿着列轴对齐 grid-item 里的内容。

    .item {
      align-self: start | end | center | stretch;
    }
    
    属性值
    • start:将内容对齐到网格区域的顶部
    • end:将内容对齐到网格区域的底部
    • center:将内容对齐到网格区域的中间
    • stretch:填充网格区域的高度(这是默认值)

    本篇文章到此结束,欢迎提建议哈!

    参考文献:

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

    https://www.html.cn/archives/8510

    展开全文
  • CSS新布局之display: grid

    万次阅读 多人点赞 2020-06-19 10:12:58
    我们一起来学习一下CSS 的Grid布局是如何使用的 通过这篇文章以后等我们自己做UI库的时候就会多了一种做法。 我们来使用CSS Grid创建一个超酷的图像网格图,它可以根据屏幕的宽度来改变列的数量。最精彩的地方在于:...

    我们一起来学习一下CSS 的Grid布局是如何使用的
    通过这篇文章以后等我们自己做UI库的时候就会多了一种做法。
    我们来使用CSS Grid创建一个超酷的图像网格图,它可以根据屏幕的宽度来改变列的数量。最精彩的地方在于:所有的响应特性被添加到了一行css代码中。这意味着我们不必将HTML与丑陋的类名(如col-sm-2, col-md-4)混杂在一起,也不必为每个屏幕创建媒体查询。
    在这里插入图片描述
    我们首先根据这个最基本的样式来分析grid,然后进行拓展。接下来我将代码分享给大家:
    html代码:

    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    

    css代码

    * {
       	margin: 0;
        padding: 0;
    }
    // grid布局的关键代码!!!
    // grid布局的关键代码!!!
    // grid布局的关键代码!!!
    .container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 50px 50px;
    }
    .container div {
        text-align: center;
        line-height: 50px;
        border: 2px solid;
        margin: 2px;
    }
    .container div:nth-child(1) {background: yellow;}
    .container div:nth-child(2) {background: orange;}
    .container div:nth-child(3) {background: red;}
    .container div:nth-child(4) {background: yellowgreen;}
    .container div:nth-child(5) {background: paleturquoise;}
    .container div:nth-child(6) {background: greenyellow;}
    

    这时我们打开控制台来分析它:
    在这里插入图片描述
    发现每一个子元素的宽高都变成了96px * 46px。可是我们并没有给子元素设置宽高,那么这个是哪里来的呢?我们在回头看父元素的样式:

    .container {
        display: grid;
        /* 下面句的意思就是这个容器里面的子元素分成三列,每列都是100px宽 */
        grid-template-columns: 100px 100px 100px;	
        /* 下面这句的意思就是这个容器里面的子元素分成俩行,每行都是50px的高 */
        grid-template-rows: 50px 50px;
    }
    

    由于我们给子元素加了2px的边框,最后展现的96 * 64也就清楚了,grid布局还将容器下的所有子元素变成了box-sizing: border-box;怪异盒模型。如果您对于怪异盒模型不是很了解请自行百度,如果想了解更多的CSS,HTML知识请观看:https://blog.csdn.net/weixin_43606158/article/details/89811189
    我们来论证一下我们刚刚所猜测的。
    我们现在将容器的css样式改为这样:

    .container {
      	display: grid;
        grid-template-columns: 100px 100px 200px 100px;
        grid-template-rows: 80px 50px 20px;
    }
    

    效果图:
    在这里插入图片描述
    如我们猜测的一样,现在变成了四列,每列的第三个变成了200px宽度,
    但是行并没有变成三行,因为优先排列列,如果排完没有多余的就不会在排列更多的行了。其他各种复杂的情况朋友们请自行测试,笔者在这里不再多废话了,因为要开始grid布局牛逼的地方了。
    现在上面的这种方法只是给子元素写固定的宽度高度,这并不是我们想要的,它并不会随着浏览器宽度高度的变化而进行变化,我们要的是能够自适应的。

    让我们让列开始具有自适应特性吧。

    CSS 栅格布局带来了一个全新的值:fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。

    让我们将每一列更改为一个 fraction 单位宽:
    容器的CSS样式更改为:

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 50px 50px;
    }
    

    结果是栅格布局将会把整个宽度分成三个 fraction,每列占据一个 fraction 单位。

    如果我们将grid-template-columns的值更改为1fr 2fr 1fr,第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位,第二列占据两个 fraction 单位,其它列各占一个 fraction。

    朋友们请自行观看效果,此时你的这些子元素都会随着你的屏幕宽度的变化而跟着变化了。

    总的来说,fraction 单位值将使你可以很容易的更改列的宽度。

    高级响应:

    然而,上面列子并没有给出我们想要的响应性,因为网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点,你必须学习如下三个概念:

    repeat()

    首先我们学习repeat()函数。这是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:
    容器CSS更改为:

    .container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(2, 50px);
    }
    

    在上面代码中,repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量,第二个参数指定它们的宽度,因此它将为我们提供与开始时完全相同的布局。

    auto-fit

    然后是auto-fit。让我们跳过固定数量的列,将3替换为自适应数量:

    .container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, 100px);
        grid-template-rows: repeat(2, 100px);
    }
    

    现在,栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px,我们将永远没法获得所需的弹性,因为它们很难填充整个宽度。

    minmax()

    为了解决上述问题,我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr),代码如下:

    .container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: repeat(2, 100px);
    }
    

    请注意,所有响应都发生在一行 css 代码中
    现在的效果堪称完美。minmax()函数定义的范围大于或等于 min, 小于或等于 max。

    因此,现在每列将至少为 100px。但如果有更多的可用空间,栅格布局将简单地将其均分给每列,因为这些列变成了 fraction 单位,而不是 100px。


    如果朋友们要在子元素里面添加图片的话请继续向下看,CSS属性的object-fit: cover;

    我们现在可以将你所有子元素当中的数字改成图片了,比如:

    <div><img src="你的图片路径"/></div>
    

    为了使图片适应于每个条目,我们将其宽、高设置为与条目本身一样,我们使用object-fit:cover。这将使图片覆盖它的整个容器,根据需要,浏览器将会对其进行裁剪。
    增加CSS样式

    .container > div > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    

    ok!现在你已经了解了 CSS Grid 布局中最复杂的概念之一了,请给自己一个赞吧。

    浏览器兼容性:

    如果您不知道怎么查看浏览器的兼容性,笔者给您推荐:查看前端代码在各浏览器的支持情况的方法
    在这里插入图片描述

    展开全文
  • Matplotlib plt.grid()用法

    千次阅读 2019-06-28 17:57:50
    import matplotlib as ...plt.grid() # 显示网格线 1=True=默认显示;0=False=不显示 plt.grid(1) # 显示网格线 plt.grid(True) # 显示网格线 plt.grid(b=True) # 显示网格线 plt.grid(b=1) # 显示网格线 plt.grid(b...
  • .grid()方法(tkinter,Python3.x)

    千次阅读 2016-11-21 17:55:04
    .grid()方法以下语句可以在你的应用界面显示 w 插件: w.grid(option=value , ...) 这个方法使用grid结构管理器,登记了 w 插件。如果没有这条语句,将不会在屏幕中显示这个插件,而只存在于代码中。语句中的...
  • Grid常见操作

    2018-11-12 00:11:01
    grid = $("#grid").data("kendoGrid"); //获取kendoGrid对象 for (var i = 0; i &lt; grid.columns.length; i++) { //遍历所有字段 if (grid.columns[i].field != null) { ...
  • Tkinter 布局管理器(二):grid

    千次阅读 2019-01-01 22:42:54
    Tkinter 布局管理器之grid pack、grid 和 place 均用于管理同在一个父组件下的所有组件的布局,其中: pack 是按添加顺序排列组件 grid 是按行/列形式排列组件 place 则允许程序员指定组件的大小和位置 何时使用...
  • Grid布局一

    2019-08-18 08:23:03
    一、简介 CSS网格布局(又称“网格”),是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和inline-block(行内块)布局...
  • Python绘图库Matplotlib.pyplot之网格线设置(plt.grid())

    万次阅读 多人点赞 2019-07-09 10:36:12
    很多时候为了可视化效果的美观,就不得不从细节上下手,这里我们就介绍一下这些细节之一的网格线。 首先导入需要用到的库,matplotlib.pyplot是必须的,Numpy是为了生成画布用的。 import numpy as np ...
  • CSS Grid 布局完全指南(图解 Grid 详细教程) 转自:https://www.html.cn/archives/8510/ CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它...
  • 与flex布局不同的是,网格布局(grid)是一个二维的布局,可以创建任意行列的布局。 首先来介绍几个概念; 想象一个五行五列的布局,网格线就是构成网格所有的线条,五行五列的布局每行就会有6条网格线。 网格...
  • matlab中grid的用法

    万次阅读 2015-04-22 16:46:59
    在matlab中,有时需要输出的figure中的表格变密一点,以更加准确的估算出对应点的坐标,此时可以在整个程序后面加上grid minor; grid on;%添加网格 grid off;%去掉网格
  • Matlab中grid 的使用

    万次阅读 2017-01-08 20:31:14
    grid on是 打开网格grid off是 关闭网格而grid是切换两种状态,如果在grid off的状态下,输入grid,相当于grid on相反,如果在grid on状态下输入grid 等价于grid off
  • **matlab中gridgrid on 和grid off用法**

    万次阅读 2018-11-01 09:28:29
    1、grid函数: 显示或隐藏轴网格线。 %% 无网格 x = linspace(0,10); y = sin(x); plot(x,y) %% 有网格 x = linspace(0,10); y = sin(x); plot(x,y) grid %% 网格消失即无网格 x = linspace(0,10); y = sin...
  • 一劳永逸的grid布局

    万次阅读 2018-03-08 11:01:47
    简介CSS网格布局(又称“网格”),是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和inline-block(行内块)布局,但是...
  • 1:选中Off grid的的元器件;2:单机鼠标右键;3:在弹出的对话框中选择Align, 出现二级菜单,选中最后一个,Align to grid!就可以了Align:使成一线,使结盟; 排整齐,对齐Align to grid:对齐到栅格上。...
  • 在c#中,有时需要通过代码创建面板控件
  • Pytorch torchvision.utils.make_grid()用法

    万次阅读 多人点赞 2018-10-11 09:49:47
    make_grid的作用是将若干幅图像拼成一幅图像。其中padding的作用就是子图像与子图像之间的pad有多宽。 这是padding为0的结果 这是padding为2的结果 在需要展示一批数据时很有用。...
  • AD中off grid pin问题解决

    万次阅读 2018-07-05 18:27:45
    AD软件在使用过程中提示“off grid pin”的警告,并不是原理图电气连接出问题了,而是元器件或者器件PIN脚没有和栅格对齐造成的原因,解决办法如下:(1)打开AD,点击“工程”-“工程参数”(2)“Error Reporting...
1 2 3 4 5 ... 20
收藏数 294,728
精华内容 117,891
关键字:

grid