CSS3----grid布局知识点

最新推荐文章于 2022-05-31 15:04:54 发布

weixin_33749131

最新推荐文章于 2022-05-31 15:04:54 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/SunlikeLWL/p/8884332.html

版权

<html>

<head>
    <meta charset="utf-8">
    <title>CSS3----grid布局知识点</title>
    <meta name="keyword" content="CSS3----grid布局知识点">
    <meta name="discription" content="CSS3----grid布局知识点">
</head>

<body>
    重要概念:
    1.Grid Line
        网格之间的分隔线

    2.Grid Track
        两个相邻网格线之间的空间
   
    3.Grid Cell
    相邻的两行和两列网格线之间的空间

    4.Grid Area
    四条网格线包围成的田字空间

    5.Grid 属性列表:
        Grid 容器属性列表全部属性:
 		display
 		grid-template-columns
 		grid-template-areas
 		grid-template
 		grid-column-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
 		gird-column-end
 		grid-row-start
 		grid-row-end
 		grid-column
 		grid-row
 		grid-area
 		justify-self
 		align-self


 		display:
 		将元素定义为grid容器
 		并为其内容建立新的网格格式化上下文(grid formatting context)
            grid: 生成一个块级(block-level)网格
 		    inline-grid: 生成一个行级(inline-level)网格
 		    subgrid 从他的父(grid)网格列表获取他的行/列的大小,而不是指定自己的大小

 		 grid-tempalte-columns: 10px 10px auto 10px;
 		 //设置网格的宽度

 		 grid-template-rows: 10px 10px auto;
         //设置网的高度

         grid-tempalte-columns: 1fr 1fr;
         //两列每列各占50%;

         grid-tempalte-columns: 1fr 1fr 50px;
         //前两列各占出去50px的50%

         grid-template-areas:
         //通过引用grid-area属性指定的网格区域的名称来定义网格模板
         从夫网格区域的名称导致内容扩展到这些单元格
         点号表示一个空单元格
         语法本身提供了网格结构的客观化

         .item-1{
	         grid-area:header;
	     }
	     .item-2{
	         grid-area:left;
	     }
	     .item-3{
	         grid-area:right;
	     }
	     .item-4{
	         grid-area:footer;
	     }

	     gird-template-areas:
	          "header header header"
	          "left . right"
	          "footer footer footer"


	      grid-template:grid-template-rows,grid-template-columns,grid-template-area的简写



	      grid-columns-gap,grid-row-gap
	      //指定网格线的大小
	      grid-columns-gap: 10px;
	      rid-row-gap: 10px;

	      grid-gap: grid-columns-gap,gris-row-gap的缩写

	      justify-items
	      //沿着行轴方向的对齐方式
	      start: 左对齐
	      end: 右对齐
	      center: 中间对齐
	      stretch: 伸展沾满整行

	      align-items:
	      //沿着列轴方向的对齐方式
	      start: 顶端对齐
	      end: 底部对齐
	      center:中间对齐
	      stretch: 伸展占满整列

	      justify-content:
	      //容器内网格的水平对齐方式
	      start: 左对齐
	      end: 右对齐
	      center: 居中对齐
	      stretch: 扩展沾满
	      space-around: 列两边都隔开(margin-left,margin-right),列的左右间隔是一样的,两列之间的间隔是*2
	      space-between: 列之间隔开
	      space-evenly: 列两边都隔开(margin-left,margin-right),每个缝隙都是一样大小的


	      align-content: 
	      //容器内玩个的垂直对齐方式
	      start:顶端对齐
	      end: 低端对齐
	      center: 中间对齐
	      stretch: 伸展对齐
	      space-around: 行两边都隔开(margin-top,margin-top),行的上下间隔是一样的,两行之间的间隔是*2
	      space-between: 行之间隔开
	      space-evenly: 行两边都隔开(margin-top,margin-top),每个缝隙都是一样大小的



	      grid-auto-columns/grid-auto-rows
	      自动生成的网格宽高




	      grid-auto-flow
	      用于控制没有显示指明网格上的item放置的位置
	      row: 依次填充每行,按需求添加新行
	      column: 依次填充每列,按需求添加列
	      dense: 后面的小块的item可以填充到前面的空位置中

	      item属性:
	      grid-column-start: 水平方向从哪格开始
	      grid-column-end: 水平方向从哪格结束
	      grid-rows-start: 垂直方向从哪格开始
	      grid-rows-end: 垂直方向从哪格结束


	      grid-column:  grid-column-start,grid-column-end的缩写
	      grid-rows:grid-rows-start,grid-rows-rows的缩写


	      grid-area:grid-column-start,grid-column-end,grid-rows-start,grid-rows-rows的缩写


	      justify-self: 
	      item内部元素的水平对齐方式
	      start: 水平方向左对齐
	      end: 水平方向右对齐
	      center:水平方向居中对齐
	      stretch: 水平方向伸展对齐


	      align-self:
	      //item内部元素垂直对齐方式
	      start: 垂直方向上端对齐
	      end: 垂直方向下端对齐
	      center: 垂直方向中间对齐
	      stretch: 垂直填充

	          
</body>

</html>

转载于:https://www.cnblogs.com/SunlikeLWL/p/8884332.html

weixin_33749131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3----grid布局知识点

<html><head> <meta charset="utf-8"> <title>CSS3----grid布局知识点</title> <meta name="keyword" content="CSS3----grid布局知识点"> <meta name="disc...
复制链接

扫一扫