邢台商城类网站建设,自己做的网站外网访问,摄影作品欣赏网站推荐,网站建设购物商城grid网格定义
css网格是一个用于web的二维#xff08;行和列的组合#xff09;布局#xff0c;利用网格#xff0c;你可以把内容按照行和列的格式进行排版#xff0c;另外#xff0c;可以轻松的实现复杂布局。
1.定义网格和fr单位
1.1定义网格
在父元素加上#xff… grid网格定义
css网格是一个用于web的二维行和列的组合布局利用网格你可以把内容按照行和列的格式进行排版另外可以轻松的实现复杂布局。
1.定义网格和fr单位
1.1定义网格
在父元素加上display:grid 或者displayinline-grid,网格项定义默认为一列并且网格项的columnfloat,clear,vertical-align等这些设置全部无效
grid生成块级的网格容器。inline-grid: 生成行内的网格容器。
1.2简单使用
gril-template-columns:设置网格的列数定义每列的列宽
gril-template-columns:设置网格的行数定义每行的高度
两个属性都需要设置在容器上接受多个值要使用空格隔开
1.2.1 单位值
.main{/* 设置成块元素 */display: grid; grid-template-columns: 50px 100px 50px;grid-template-rows: 60px 60px 60px;
}
以上代码设置三列的宽度为50px 100px 50px三行的宽度为60px 60px 60px。
1.2.2 百分比
grid-template-columns: 20% 20% 60%;
grid-template-rows: 60px 60px 60px;
以上代码设置的3列宽度为20% 20% 60%;
1.2.3 auto
grid-template-columns: 50px auto 100px;
grid-template-rows: 60px 60px auto;
auto设置能让第二列占满剩余的空间让第三行占满剩余的高度
1.2.4 fr
一个 fr 单位代表网格容器中可用空间的一等份。
grid-template-columns: 1fr 1fr;
以上代码设置了两列宽度各占50%如果只有一列并设置成了1fr则是充满全屏
grid-template-columns: 1fr 3fr 100px;
以上代码第二列是第一列的三倍
width: 300px;
height: 300px;
background-color: skyblue;/* 定义成网格 */
display: grid;
/* 列 */
/* grid-template-columns: 50px 50px 50px; */
/* 行 */
/* grid-template-rows: 50px 50px 50px; *//* auto 沾满剩余空间 */
/* grid-template-columns: 50px 20% auto; */
/* grid-template-rows: 50px 50px; *//* grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 1fr; */grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.3fr 0.3fr;
0.3fr 0.3fr 整个高度是1fr,占0.3/1fr。
网格间隙 grid-column-gap列之间的间隙grid-row-gap行之间的间隙grid-gap grid-row-gap 和 grid-column-gap 属性的简写属性
2.grid-template-areas 合并网格及网格命名
使用命名方式定义网格区域需要配合grid-area属性使用
grid-template-areas: b1 b1 a2 a1 a1 a2 a3 a3 a3 ;
grid-area: a2;
当使用了grid-area指定了一个网格名后同名的将会合并
注意相同的网格名只能像excel表格那样同行同列以矩形的方式分布不能有间隔与excel表格合并一样可以自己先去熟悉一下excel表格便于理解
style
.main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;/* 给每个单元格起名 按照行列起名 引号引起来 每个名字之间使用空格隔开*/grid-template-areas:b1 b1 a2a1 a1 a2a3 a3 a3;
}.main div {background-color: rgb(128, 128, 215);border: 1px solid black;box-sizing: border-box;
}.main div:nth-of-type(1) {grid-area: lizhi1;
}.main div:nth-of-type(2) {grid-area: a2;
}.main div:nth-of-type(3) {grid-area: a3;
}
/style
/headbody
div classmain
div1/div
div2/div
div3/div
/div
/body
3.对齐方式
针对的是整体
justify-content 水平方向 取值start end center space-around space-between space-evenlyalign-content 垂直方向 取值start end center space-around space-between space-evenlyplace-content垂直方向 水平方向。
.main{width: 500px;height: 500px;background-color: skyblue;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 水平方向取值start end center space-around space-between space-evenly*//* justify-content: space-evenly; *//* 垂直方向取值start end center space-around space-between space-evenly*//* align-content: end; *//* 复合样式 第一个参数垂直第二个参数水平*/place-content: end space-evenly;
}
4.显式网格和隐式网格
隐式网格指的是显示在网格之外的隐藏网格
子项有多少个网格就有多少个是显式网格
网格如果比子项少就是隐式网格 grid-auto-flow:row; 默认值就是row 会产生隐式网格 grid-auto-rows: 100px; 设置隐式网格 的高度
.main{width: 300px;height: 300px;background-color: skyblue;display: grid;/* 如果有三个子元素是可以的 如果是五个子元素 那么第四个和第五个元素就是 隐式网格 *//* grid-template-columns: 100px 100px 100px;grid-template-rows: 100px; *//* 默认值就是row 会产生隐式网格 *//* grid-auto-flow:row; *//* 设置隐式网格 的高度 *//* grid-auto-rows: 100px; */grid-template-columns: 100px;grid-template-rows: 100px 100px 100px;grid-auto-flow: column;grid-auto-columns: 100px;
}
5.实现紧密效果
grid-auto-flow: row|column|dense|row dense|column dense; grid-auto-flow 属性指定自动布局算法怎样运作精确指定在网格中被自动布局的元素怎样排列。
row默认值。 通过填充每一行来放置网格元素在必要时增加新列。column通过填充每一列来放置网格元素在必要时增加新列。dense该关键字指定自动布局算法使用一种稠密堆积算法如果后面出现了稍小的元素则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白但同时也可能导致原来出现的次序被打乱。row dense按行来填充网格中前面留下的空白column dense按列来填充网格中前面留下的空白grid-auto-rows: auto|max-content|min-content|length; grid-auto-rows 属性用于设置网格容器中行的默认大小。
auto默认值。 列的大小由容器的大小决定max-content根据列中最大的网格元素设置每列的大小min-content根据列中的最小的网格元素设置每列的大小length使用自定义的长度值设置列的大小。
.main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px;/* 有这个属性 grid-column-start 会从第二列开始 第一列被空出来*/grid-auto-flow: dense;/* grid-auto-rows: 100px; */
}.main div{background-color: skyblue;border: 1px solid black;box-sizing: border-box;
}.main div:nth-of-type(1){/* 从第几列开始 */grid-column-start: 2;
}
6.基于线的元素放置
每条线都是有名字的
grid-column-end指定网格元素列的结束位置grid-column-start指定网格元素列的开始位置
grid-column-start: 2;
grid-column-end: 3;
7.占的列数 span
grid-column-start: auto|span n|column-line;
auto默认值网格元素按流设置。span n指定网格元素将跨越的列数。column-line指定从哪个列上开始显示网格元素。
grid-column-start: 1;
/* span表示的占用两列默认从第一列开始 没有指认能力
span表示的是占用的列的数量 不是位置 */
grid-column-end: span 3;
8.通过命名的方式
除了使用数字还可以使用命名的方式在浏览器控制台中是可以查看的
使用方括号 给线命名 名字随便起 grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
.main {width: 300px;height: 300px;background-color: skyblue;display: grid;/* 使用方括号 给线命名 名字可以随便起 */grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];}.main div:nth-of-type(1) {background-color: aqua;grid-column-start: col2;/* span表示的占用两列默认从第一列开始 没有指认能力span表示的是占用的列的数量 不是位置 */grid-column-end: col4
}
9.简写 grid-column grid-row
/* 第一个参数起始列 第二个参数是结束列 */
grid-column: 2 / 4;
grid-row: 2 / 4;
10.简写方式二
grid-area:grid-row-start grid-column-start grid-row-end grid-colum-end属性的简写
以及额外支持grid-template-areas设置网格名称
从第 2 行开始和第 2 列开始 第 4 行和第4 列结束
grid-area: 2 / 2 / 4 / 4;
从第 2 行开始和第 2 列开始 跨越2行2列
grid-area: 2 / 2 / span 2 / span 2;
11.针对子项的居中方式
跟place-items用法相同只不过是操作指定的子元素
justify-self: center;
align-self: center;
12.repeat和minmax
repeat()指的是重复次数
.main{display:grid;grid-template-columns: repeat(3,100px)
}
上面代码的意思是重复三次每一列宽度是100px
.main{display:grid;grid-template-columns: repeat(3,1fr)
}
以上代码的意思是重复三次每列宽度为33.33%父元素的 1/3 grid-template-columns: repeat(2,50px 100px 150px) // 等同于grid-template-columns: 50px 100px 150px 50px 100px 150px
/* grid-template-columns: 100px 100px 100px; *//* grid-template-columns: repeat(3, 100px); *//* grid-template-columns: 150px 100px 100px; */
/* grid-template-columns: 150px repeat(2, 100px); *//* grid-template-columns: repeat(3,1fr) *//* grid-template-columns: repeat(2,50px 100px 150px) *//*
auto-fill:自动调节会根据窗口的大小自动调节网格的个数
*/
grid-template-columns: repeat(auto-fill, 150px);
grid-template-rows: 100px;
上面代码意思是150xp宽度的网格自动铺满
minmax()长度范围
minmax(最小值最大值)接受两个参数设置最小值和最大1值的函数
.main{display:grid;grid-template-columns:1fr minmax(200px, 1fr)
}
设置两列第一列的宽度为1fr 第二列的宽度范围最小值是100px,最大值是1fr
.main{display:grid;grid-template-columns:100px minmax(200px, 1fr)
}
设置两列第一列的宽度为100px 第二列的宽度范围最小值是100px,最大值是占满剩余空间
max-content关键字内容的大小
.main{display:grid;grid-template-columns:100px minmax(max-content, auto)
}
设置两列第一列宽度为100px第二列最小值是这列内容的大小最大值是占满剩余宽度
