css 栅格系统

神奇大叔

已于 2022-07-02 22:58:39 修改

阅读量472

点赞数

分类专栏： css 文章标签： css

于 2020-06-18 21:39:53 首次发布

本文链接：https://blog.csdn.net/weixin_43294560/article/details/106838582

版权

css 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

在这里插入图片描述

网格线编号从左上角为1开始递增，负数则指向从右下角开始的位置

父元素容器设置栅格:

声明栅格容器

display: grid;  父元素得有高宽
display:inline-grid;  行内栅格，宽度只能够包含子元素

绘制栅格

方式一(手动设置):

grid-template-rows:npx npx npx ...;    设置行方向每格高度，任意单位类型都可以: 
grid-template-columns:npx npx npx ...; 设置列方向每格宽度，任意单位类型都可以:

新增表格单位：
	fr（fraction unit），这个单位跟Flexbox中flex-grow因子的表现一样
	grid-template-columns:1fr 1fr 1fr表示三列等宽。

方式二(repeat设置):

grid-template-rows:repeat(重复次数,每格大小);
grid-template-rows:repeat(重复次数,大小1 大小2); 绘制 格数*2个的每两个高度分别为大小1,大小2的格子
	repeat(3, 2fr 1fr)会重复三遍这个模式，从而定义六个网格轨道，重复的结果是2fr 1fr 2fr 1fr 2fr 1fr。
grid-template-rows:1fr repeat(重复次数,大小1 大小2) 2fr;  可以和普通形式混用

方式三(设置大小自动填充格子格数)

grid-template-rows:repeat(auto-fill,每格大小)
	auto-fill:只要网格放得下，浏览器就会尽可能多地生成轨道，并且不会跟指定大小的限制产生冲突。
	auto-fit:如果网格元素不够填满所有网格轨道，auto-fill就会导致一些空的网格轨道，它会让非空的网格轨道扩展，填满可用空间
grid-template-rows:repeat(4, auto)；
grid-template-rows:repeat(重复次数,minmax(n单位,n1单位);  
	设置后,当父元素容器变化时,每行高度会在这个范围内波动,最少为n单位,最大为n1单位,之间会自动填充高度

栅格间距

 row-gap:npx;  
 column-gap:npx;
 gap:行间距 列间距

栅格排列方向和自动填充

grid-auto-flow:row    默认水平排列 
grid-auto-flow:column 数值排列
grid-auto-flow:row dense 
	添加dense，会让算法紧凑地填满网格里的空白，尽管这会改变某些网格元素的顺序。加上这个关键字，小元素就会“回填”大元素造成的空白区域

栅格对齐方式

设置栅格整体对齐方式(非栅格内容,及当每行/每列栅格的高/宽小于父容器高/宽,生效)—即栅格在水平/竖直方向未撑满父元素
justify-content针对的是网格
它明确指定了网格容器的高度为1200px，但是只定义了高800px的有效水平网格轨道。align-content属性指定了网格轨道如何在剩下的400px空间内分布。

在这里插入图片描述

水平:justify-content:start/end/center/space-around/stretch/...
竖直:align-content:start/end/center/space-around/...
简写:place-content:竖直对齐方式 水平对齐方式;

设置栅格内的内容对齐方式(即当每行/每列栅格的栅格等于父元素高/宽时生效)—即栅格在水平/竖直方向撑满父元素
justify-items针对的是网格内的内容

水平: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表示最后一列/最后一行
- 当制定线编号时：网格线编号从左上角为1开始递增，负数则指向从右下角开始的位置，查看上方图

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-row:span n;    不指定开始线,默认从1开始偏移

方式二(指定线名)

在父元素画格子时指定
grid-template-rows:[第一行名1] npx [第二行名1  第二行名2 ...可设置多个名称] npx [第三行名1 第二行名2] npx ...;
grid-template-rows:repeat(重复次数,[行名称 ...] 大小 [行名称])
	每条水平网格线被命名为对应的名称（除了最后一条）

子元素指定栅格:
采用简写方式一样
grid-row-start:行名称;    从第n行的线开始
grid-row-end:行名称;      到第n行的线结束
grid-column-start:列名称; 从第n列的线开始
grid-column-end: 列名称;  到第n列的线结束

grid-row:名称 3/span n;	表示从第三个名称跨越n个单位的区域

如果网格线命名为left-start和left-end，就定义了一个叫作left的区域，这个区域覆盖两个网格线之间的区域。-start和-end后缀作为关键字，定义了两者之间的区域。如果给元素设置grid-column: left，它就会跨越从left-start到left-end的区域

在这里插入图片描述

方式三（指定区域）

指定线

grid-area:行开始线n/列开始线n/行结束线n/列结束线n

指定线名

在父元素画格子时指定
grid-template-rows:repeat(重复次数,[行名称]大小)

子元素指定栅格	
grid-area:行名称 开始n/列名称 开始n/行名称 结束n/列名称 结束n

指定区域名

在父元素
每一个字符串代表网格的一行，字符串内用空格区分每一列
每个命名的网格区域必须组成一个矩形。不能创造更复杂的形状，比如L或者U型
grid-template-areas:"名称1 名称2 "  
					"名称3 名称4" 
					". . "  //一个'.'点就代表占位一个栅格
子元素
grid-area:名称;  及代表子元素所占的栅格为指定名称的栅格

在这里插入图片描述

指定区域名后再使用线

在父元素
grid-template-areas:"名称1 名称2 "  
					"名称3 名称4"
子元素指定占据栅格
grid-area:名称-start/名称-start/名称-end/名称-end
	分别为:对应名称的栅格的行起始线/对应名称的栅格的列起始线/对应名称的栅格的行结束线/对应名称的栅格的列结束线

显示网格和隐式网格

网格元素仍然可以放在显式轨道外面，此时会自动创建隐式轨道以扩展网格，从而包含这些元素
下图里的网格只在每个方向上指定了一个网格轨道。当把网格元素放在第二个轨道（2号和3号网格线之间）时，就会自动创建轨道来包含该元素。
指定网格线的时候，隐式网格轨道不会改变负数的含义。负的网格线编号仍然是从显式网格的右下开始的。
设置隐式网格大小

默认为auto，会扩展到能容纳网格元素的内容
给网格容器设置
grid-auto-columns:1fr
grid-auto-rows:1fr

栅格自动布局示例
要实现的效果
在这里插入图片描述代码：
默认效果：
最终代码

代码示例:

<!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>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 栅格系统

父元素容器设置栅格:绘制栅格方式二(repeat设置):方式三(设置大小自动填充格子格数)栅格间距栅格排列方向和自动填充栅格对齐方式设置栅格内的内容对齐方式(即当每行/每列栅格的栅格等于父元素高/宽时生效)—即栅格在水平/竖直方向撑满父元素设置单个栅格内的内容对齐方式子元素设置方式二(指定线名)如果网格线命名为left-start和left-end，就定义了一个叫作left的区域，这个区域覆盖两个网格线之间的区域。-start和-end后缀作为关键字，定
复制链接

扫一扫