css 栅格系统

傷城~ 2021-07-25 01:15 471阅读 0赞

父元素容器设置栅格:
     内部子元素会按顺序从左往右依次排列在栅格内
     
     	声明栅格容器
    		display: grid;  父元素得有高宽
    		display:inline-grid;  行内栅格
    		
    	绘制每格
    	 方式一(手动设置):
    		grid-template-rows:npx npx npx ...;    设置行方向每格高度: 
    		grid-template-columns:npx npx npx ...; 设置列方向每格宽度:
    		
    	 方式二(重复设置):
    	 	grid-template-rows:repeat(格数,每格大小);
    	 	grid-template-rows:repeat(格数,大小1 大小2); 绘制 格数*2个的每两个高度分别为大小1,大小2的格子
    	 	
    	 方式三(设置大小自动填充格子格数):
    	 	grid-template-rows:repeat(auto-fill,每格大小)
    	
    	 方式四(每格按份设置,自动填充格子高宽)
    		grid-template-rows:repeat(格数,1fr);  类似flex:1
    	
    	 方式五(控制每格波动范围)
    		grid-template-rows:repeat(格数,minmax(npx,n1px);  设置后,当父元素容器变化时,每行高度会在这个范围内波动,最少为npx,最大为n1px,之间会自动填充高度
    		
    	栅格间距
    		 row-gap:npx;  
    		 column-gap:npx;
    		 gap:行间距 列间距
    	
    	有内容的栅格自动填满空的栅格:
    		grid-auto-flow:row dense
    		
    	设置栅格整体对齐方式(非栅格内容,及当每行/每列栅格的高/宽小于父容器高/宽,生效)---即栅格在水平/竖直方向未撑满父元素
    		水平:justify-content:start/end/center/space-around/stretch/...
    		竖直:align-content:start/end/center/space-around/...
    		简写:place-content:竖直对齐方式 水平对齐方式;
    		
    	设置栅格内的内容对齐方式(即当每行/每列栅格的栅格等于父元素高/宽时生效)---即栅格在水平/竖直方向撑满父元素
    		水平:justify-items:start/end/center/space-around/stretch/...; 子元素内容会在所在栅格内对齐
    		竖直:align-items:start/end/center/space-around/...;
    		简写:place-item:竖直对齐方式 水平对齐方式;
    		
    	设置单个栅格内的内容对齐方式
    	 子元素选择器中
    		水平:justify-self:justify-content:start/end/center/space-around/stretch/...
    		竖直:align-self:justify-content:start/end/center/space-around/stretch/...
    		简写:place-self:竖直对齐方式 水平对齐方式;
    		
    子元素设置
    
    	**线指定占据栅格**
    	 方式一(根据线来指定) 如3*3的格子,n为1表示第一行/列的线,n为4表示最后一列/最后一行
    	 	grid-row-start:n;    从第n行的线开始
    		grid-row-end:n;      到第n行的线结束
    		grid-column-start:n; 从第n列的线开始
    		grid-column-end: n;  到第n列的线结束
    		
    	 方式二(指定线名)
    	 	在父元素画格子时指定
    	 		grid-template-rows:[第一行开始名]npx[第一行结束名  第二行开始名] npx[第二行结束名 第三行开始名] npx ...;
    	 	 子元素指定栅格:
    		 	grid-row-start:行名称;    从第n行的线开始
    			grid-row-end:行名称;      到第n行的线结束
    			grid-column-start:列名称; 从第n列的线开始
    			grid-column-end: 列名称;  到第n列的线结束
    	
    	 方式三(重复命名)
    		在父元素画格子时指定
    			grid-template-rows:repeat(格数,[ 行开始名称]大小[ 行结束名称 ])
    		子元素指定栅格
    			grid-row-start:行开始名称 n;    从第n行的线开始
    			grid-row-end:行结束名称 n;      到第n行的线结束
    			grid-column-start:列开始名称 n; 从第n列的线开始
    			grid-column-end: 列结束名称 n;  到第n列的线结束
    	
    	 方式四(偏移量)
    			grid-row-start:n;    从第n行的线开始
    			grid-row-end: span n;      从第n行开始,偏移n个，不指定开始线,默认从1开始偏移
    			grid-column-start:n; 从第n列的线开始
    			grid-column-end: span n;  从第n列开始,偏移n个，不指定开始线,默认从1开始偏移
     
    	 方式五(简写)----推荐----
    	  支持名称和数字
    	 	grid-row:n/n;    从第n行的线开始到第n行结束
    		grid-column: n/n;  到第n列的线结束到第n列结束
    		grid-row:n/span n;  从第n行的线开始,水平偏移n个
    
    	**区域指定占据栅格**
    	 方式一(指定线)
    		grid-area:行开始线n/列开始线n/行结束线n/列结束线n
    		
    	 方式二(指定线名)
    	    在父元素画格子时指定
    			grid-template-rows:repeat(格数,[ 行名称]大小)
    		子元素指定栅格	
    			grid-area:行名称 开始n/列名称 开始n/行名称 结束n/列名称 结束n
    	
    	 方式三(指定区域名)
    		在父元素画栅格结束后
    			grid-template-areas:"名称1 名称2 "  "名称3 名称4"
    				" "内的名称分别代表水平方向的格子,另一行的格子在后面的" "内,若一行内的名称相同,则同一个名字代表所在的多个格子
    		子元素
    			子元素的容器标签可以换成所定义的名称,在子元素的选择器中
    				grid-area:名称;  及代表子元素所占的栅格为指定名称的栅格
    	
         方式四(指定区域名后再使用线):
         	在父元素画栅格结束后
    			grid-template-areas:"名称1 名称2 "  "名称3 名称4"
    		子元素指定占据栅格
    			grid-area:对应名称-start/对面名称-statr/对应名称-end/对应名称-end
    				分别为:对应名称的栅格的行起始线/对应名称的栅格的列起始线/对应名称的栅格的行结束线/对应名称的栅格的列结束线
    		
    	 方式五(占位符指定局部区域名,控制部分栅格)
    	 	在父元素画栅格结束后
    			grid-template-areas:". . "  "名称3 名称4";  一个'.'点就代表占位一个栅格
    		子元素就可使用名称占据需要的栅格
    			在子元素的选择器中:grid-area:名称;

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    		.box{ 
    			width: 300px;
    			height: 300px;
    			border: solid 1px red;
    			display: grid;
    			row-gap: 10px;
    			column-gap: 10px;
    			/* grid-template-rows:repeat(3,1fr); */
    			grid-template-rows: repeat(3,100px);
    			/* grid-template-rows:100px 100px 100px; */
    			grid-template-columns: repeat(3,100px);
    			/* grid-template-columns: 100px 100px 100px; */
    		}
    		.box>div{ 
    /* width: 100px; height: 100px; */
    			background-color: blueviolet;
    			border: solid 1px blueviolet;
    			background-clip: content-box;
    			padding: 10px;
    			box-sizing: border-box;
    		}
    		div:first-child{ 
    /* grid-row-start:1; grid-row-end:2; grid-column-start: 1; grid-column-end: 4; */
    			
    			grid-area:1/1/4/4
    		}
    			
    	</style>
    	</head>
    	<body>
    		<div class='box'>
    			<div>1</div>
    			<div>2</div>
    			<div>3</div>
    			<div>4</div>
    			<div>1</div>
    			<div>1</div>
    			<div>1</div>
    			<div>1</div>
    			<div>1</div>
    		</div>
    		
    	</body>
    </html>