grid-gap属性(CSS设置)
grid-gap属性(CSS设置)
和flex布局不同的是,网格布局(grid)是一个二维的布局,能够创建恣意队伍的布局。
首先来介绍几个概念;
想象一个三行三列的布局,网格线便是构成网格所有的线条,三行三列的布局每行就会有4条网格线。
网格轨道便是相邻两条平行的网格线之间的部分。
和flex布局一样,他会有父容器和子项目,在这儿咱们称为网格容器和网格项。
接下来,咱们从网格容器到网格项的各个根本特点来介绍网格布局。
网格容器
网格容器是决定将网格分为几行几列,所以首先完成网格布局就要使该容器具有以下几个特点:
display:grid;
grid-template-columns
grid-template-rows
grid-gap
grid-template-areas
grid-auto-flow:dense|row(default)|column
justify-items:start|end|center|stretch(default)
align-items:
start|end|center|stretch(default)
grid-auto-columns:
网格布局的父容器根本特点便是以上几个。
display:grid
表明为网格布局,和flex布局中的display:flex含义相同,相同该特点还能够取值:inline-grid和subgrid
grid-template-columns
创建网格的列数,除了百分比的方法之外,还支持各种单位的组合方法,比方grid-template-columns:100px20%1em1vw20%;
但是有个repeate函数能够简化相同的值,比方grid-template-columns:repeat(5,20%)表明5个20%的宽度,和例子中的含义完全相同。
fr用于等分剩下空间,它的巨细是将该特点上的所有可计算的值(包括各种单位,百分比)除掉后,剩下空间的巨细。
引荐运用fr。它也会主动计算除了grid-gap之外其余的部分。
如grid-template-columns:100px1fr2frrepeat(2,20%)。相同的5列布局,其中的1fr表明宽度为总宽度减去左边的100px和右侧两列的20%之后剩下的部分除以三。即第二列的宽度是将会是第三列的一半。
grid-template-rows
特点值和grid-template-columns的特点值完全一样。
grid-template
是grid-template-rows和grid-template-columns的缩写方法,特点值的写法为
grid-template:1fr50px/1fr4fr;//为行数/列数的方法,
该代码表明两行两列的布局,榜首行的高度为底行的50px确认之后剩下的高度。榜首列的宽度为将该容器分为五等分,榜首列占有一份,第二列占有四份。
grid-gap
能够取一或两个值,表明队伍之间的空隙。
grid-template-areas
经过引证grid-area特点指定的网格区域(GridArea)称号来界说网格模板。重复网格区域的称号导致内容跨过这些单元格。一个点号(.)代表一个空的网格单元。这个语法本身可视作网格的可视化结构。
grid-template-areas:
“headerheaderheaderheader”
“mainmain.sidebar”
“footerfooterfooterfooter”;
grid-auto-flow:
row:告知主动布局算法依次填充每行,根据需要增加新行
column:告知主动布局算法依次填入每列,根据需要增加新列
dense:告知主动布局算法在稍后出现较小的网格项时,尝试填充网格中较早的空缺
justify-items
沿着行轴线(rowaxis)对齐网格项(griditems)内的内容
align-items
沿着列轴线(rowaxis)对齐网格项(griditems)内的内容
grid-auto-columns:
隐式网格的宽度
grid-auto-rows:
隐式网格的高度
网格项
网格项表明网格内部的直接子元素,不包括子元素的子元素。
常用特点:
grid-column-start:列网格线开始,
grid-column-end:列网格线结束
grid-column:start/end|start/spancount
order:与z-index的特点相同,表明层叠的位置。
grid-area:网格名,在运用grid-template-areas时比较有用。
justify-self:单个网格项内行轴线的对齐方法
align-self:单个网格项在列轴线的对齐方法
作品标签: CSS
优秀作品:
评论列表(共325人参与)参与讨论或分享设计作品获得视觉癖积分奖励
pt:ht注册会员
2021-09-10 10:19:46
学手绘动漫想要画好人体,要多看人体好的优秀著作,画师通这个网站有许多的手绘动漫人体优质!手绘动漫中的人体结构、动态、比例也要同步操练! 3、学手绘在一个管壳内,成为具有所需电路功用的微型结构;其中所有元件在结构上已组成一个全体,使电子元件向着微小
回复,HTM注册会员
2021-09-10 8:28:54
-flow属游客
2021-09-10 13:44:34
游客68394:grid-gap属性(style="height: 374px; width: 400px;" /> 比如:上面这张的美女图,咱们通过抠图换3种布景 1-觉传达需求熟练把握该软件内含的工具栏与起浮面板的运用、文字排版与特效等的根本设置方式。
回复今日,我注册会员
2021-09-10 9:15:35
样,他会有父容器和子项目,在这儿咱们称为网格容器和网格项。 接下来能力的复合型高档专业技术人才。规划学学科正发明和引导人类健康作业与日子,促进社会变革与发展,在充分满足产品运用功能和人的个别审美需求的前提下,实现人-机-环境的
回复