怎么建设游戏网站,工程建设官方网站,网站建设及推广优化,邢台信息网官网一、概述
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同#xff0c;CSS Grid 布局是一个二维布局系统#xff0c;也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素#xff08;成为 Gri…一、概述
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同CSS Grid 布局是一个二维布局系统也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素成为 Grid Items 网格项你就可以轻松使用 Grid(网格) 布局。
它将网页划分成一个个网格可以任意组合不同的网格做出各种各样的布局。以前只能通过复杂的 CSS 框架达到的效果现在浏览器内置了。 上图这样的布局就是 Grid 布局的拿手好戏。
二、基本概念
项目和容器
采用网格布局的区域称为容器container。容器内部采用网格定位的子元素称为项目item。
divdivp1/p/divdivp2/p/divdivp3/p/div
/div
上面代码中最外层的div元素就是容器内层的三个div元素就是项目。
注意项目只能是容器的顶层子元素不包含项目的子元素比如上面代码的p元素就不是项目。Grid 布局只对项目生效。
行和列
容器里面的水平区域称为行row垂直区域称为列column。 上图中水平的深色区域就是行垂直的深色区域就是列。
单元格
行和列的交叉区域称为单元格cell。
正常情况下n行和m列会产生n x m个单元格。比如3行3列会产生9个单元格。
网格线
划分网格的线称为网格线grid line。水平网格线划分出行垂直网格线划分出列。
正常情况下n行有n 1根水平网格线m列有m 1根垂直网格线比如三行就有四根水平网格线根据网格线的开始和结束用于单元格项目的跨行和跨列。
三、容器属性
Grid 布局的属性分成两类。一类定义在容器上面称为容器属性另一类定义在项目上面称为项目属性。
display属性
display: grid使用在容器上指定一个容器采用网格布局。
grid-template-columns属性
grid-template-rows属性
容器指定了网格布局以后接着就要划分行和列。grid-template-columns属性定义每一列的列宽grid-template-rows属性定义每一行的行高。
.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
} 除了使用绝对单位也可以使用百分比。
repeat()
repeat()接受两个参数第一个参数是重复的次数第二个参数是所要重复的值。
.container {display: grid;grid-template-columns: repeat(3, 33.33%);grid-template-rows: repeat(3, 33.33%);
}
auto-fill关键字
有时单元格的大小是固定的但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格这时可以使用auto-fill关键字表示自动填充。
.container {display: grid;grid-template-columns: repeat(auto-fill, 100px);
}
fr 关键字
为了方便表示比例关系网格布局提供了fr关键字fraction 的缩写意为片段。如果两列的宽度分别为1fr和2fr就表示后者是前者的两倍。
.container {display: grid;grid-template-columns: 1fr 1fr;
//fr可以与绝对长度的单位结合使用
//grid-template-columns: 150px 1fr 2fr;
}
minmax()
minmax()函数产生一个长度范围表示长度就在这个范围之中。它接受两个参数分别为最小值和最大值。
minmax(100px, 1fr)表示列宽不小于100px不大于1fr。
auto 关键字
auto关键字表示由浏览器自己决定长度。
grid-template-columns: 100px auto 100px;
面代码中第二列的宽度基本上等于该列单元格的最大宽度除非单元格内容设置了min-width且这个值大于最大宽度。
grid-row-gap 属性 grid-column-gap 属性 grid-gap 属性
grid-row-gap属性设置行与行的间隔行间距grid-column-gap属性设置列与列的间隔列间距。
.container {grid-row-gap: 20px;grid-column-gap: 20px;
}
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式可以写两个值第一个是行间距第二个是列间距如果只写一个代表两个值一样。
根据最新标准上面三个属性名的grid-前缀已经删除grid-column-gap和grid-row-gap写成column-gap和row-gapgrid-gap写成gap
grid-template-areas 属性
网格布局允许指定区域area一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: a b cd e fg h i;
}
上面代码先划分出9个单元格然后将其定名为a到i的九个区域分别对应这九个单元格。
多个单元格合并成一个区域的写法如下。
grid-template-areas: header header headermain main sidebarfooter footer footer;
上面代码中顶部是页眉区域header底部是页脚区域footer中间部分则为main和sidebar其中header、footer占三个单元格的宽度,main占2个单元格的宽度slider占一个单元格的宽度。
如果某些区域不需要利用则使用点.表示。
grid-template-areas: a . cd . fg . i;
上面代码中中间一列为点表示没有用到该单元格或者该单元格不属于任何区域。
一般和grid-area属性一块使用grid-area属性指定项目放在哪一个区域。
如
.item-1 {grid-area: e;
}
上面代码中1号项目位于e区域即区域中间的位置。
grid-auto-flow 属性
划分网格以后容器的子元素会按照顺序自动放置在每一个网格。默认的放置顺序是先行后列即先填满第一行再开始放入第二行。
这个顺序由grid-auto-flow属性决定默认值是row即先行后列。也可以将它设成column变成先列后行。
grid-auto-flow: column;
grid-auto-flow属性除了设置成row和column还可以设成row dense和column dense。这两个值主要用于某些项目指定位置以后剩下的项目怎么自动放置。
justify-items 属性 align-items 属性 place-items 属性
justify-items属性设置单元格内容的水平位置左中右
align-items属性设置单元格内容的垂直位置上中下
.container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
}
place-items属性是align-items属性和justify-items属性的合并简写形式。
这两个属性的写法完全相同都可以取下面这些值。
start对齐单元格的起始边缘。
end对齐单元格的结束边缘。
center单元格内部居中。
stretch拉伸占满单元格的整个宽度默认值。
justify-content 属性 align-content 属性 place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置左中右
align-content属性是整个内容区域的垂直位置上中下
.container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
这两个属性的写法完全相同都可以取下面这些值。下面的图都以justify-content属性为例align-content属性的图完全一样只是将水平方向改成垂直方向。
start - 对齐容器的起始边框
end - 对齐容器的结束边框
center - 容器内部居中
stretch - 项目大小没有指定时拉伸占据整个网格容器
space-around - 每个项目两侧的间隔相等。所以项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等项目与容器边框之间也是同样长度的间隔。
place-content属性是align-content属性和justify-content属性的合并简写形式。
grid-template 属性 grid 属性
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
从易读易写的角度考虑还是建议不要合并属性所以这里就不详细介绍这两个属性了。
四、项目属性
面这些属性定义在项目上面
grid-column-start 属性 grid-column-end 属性 grid-row-start 属性 grid-row-end 属性
项目的位置是可以指定的具体方法就是指定项目的四个边框分别定位在哪根网格线。
grid-column-start属性左边框所在的垂直网格线
grid-column-end属性右边框所在的垂直网格线
grid-row-start属性上边框所在的水平网格线
grid-row-end属性下边框所在的水平网格线
.item-1 {grid-column-start: 2;grid-column-end: 4;
}
以上代码指定1号项目的左边框是第二根垂直网格线右边框是第四根垂直网格线跨了两个单元格。
grid-column 属性 grid-row 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
.item-1 {grid-column: 1 / 3;grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;
}
grid-area 属性
grid-area属性指定项目放在哪一个区域。
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式直接指定项目的位置。
.item {//grid-area: row-start / column-start / row-end / column-end;grid-area: 1 / 1 / 3 / 3;
}
justify-self 属性 align-self 属性 place-self 属性
justify-self属性设置单元格内容的水平位置左中右跟justify-items属性的用法完全一致但只作用于单个项目。
align-self属性设置单元格内容的垂直位置上中下跟align-items属性的用法完全一致也是只作用于单个项目。
start对齐单元格的起始边缘。
end对齐单元格的结束边缘。
center单元格内部居中。
stretch拉伸占满单元格的整个宽度默认值。
五、案例演示
接下来通过两种方式完成刚开始图示的页面效果
通过grid-template-areas定义网格布局区域
示例效果 示例代码 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle.container{display: grid;grid-template-rows: repeat(3,100px);grid-template-areas: left left left left right1 right1left left left left right2 right2left2 left2 left3 left3 right2 right2;background-color: aqua;grid-gap: 10px;}.container div{background: lightcyan;}.item1{grid-area:left;}.item2{grid-area:right1;}.item3{grid-area:left2;}.item4{grid-area:left3;}.item5{grid-area:right2;}/style/headbodydiv classcontainerdiv classitem1left1br/left1/divdiv classitem2right1/divdiv classitem3left2/divdiv classitem4left3/divdiv classitem5right4/div/div/body
/html通过网格线定义内容区域
示例效果 示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle.grid-container{display: grid;grid-template-rows: repeat(3,100px);grid-template-columns:repeat(3,calc(33.3% - 10 / 3)); background-color: aquamarine;grid-gap:10px ;}.grid-container div{background-color: lightgreen;}.item1{grid-column: 1/3;grid-row: 1/3;}.item3{grid-row: 2/4;}/style/headbodydiv classgrid-containerdiv classitem11br/111/divdiv classitem22/divdiv classitem33/divdiv classitem44/divdiv classitem55/div/div/body
/html
