上篇介绍了网格容器、网格轨道的相关属性使用方法，如果您还不熟悉网格，建议先去看看之前的文章前端入门cssGrid网格基础知识，前端入门css网格轨道详细介绍学习下网格基本知识。 本篇主要介绍网格项的相关属性：gridcolumnstart和gridrowstart（网格列、行的开始位置）gridcolumnend和gridrowend（网格列、行结束位置）gridcolumn和gridrow（网格行、列属性简写）gridarea（网格区域，更简单简写方式） 以上四组属性都和网格线密切相关，它们定义了网格项如何根据网格线来定位网格项的位置。网格行和列的开始和结束 语法如下：。item｛gridcolumnstart：gridcolumnend：gridrowstart：gridrowend：｝ 属性值说明：strong一个以数字或名称作为编号的网格线lispan设置网格项跨越的网格数目span设置网格项跨越网格直到此名称的网格线为止auto表示自动跨越，默认跨度为1网格ul 如下示例：。itema｛gridcolumnstart：2；gridcolumnend：gridrowstart：row1gridrowend：3；｝ 。itemb｛gridcolumnstart：1；gridcolumnend：spancol4gridrowstart：2；gridrowend：span2；｝ 如果没有声明gridcolumnendgridrowend，则默认情况下该项目将跨越1个网格。 项目可以相互重叠。您可以使用zindex它们来控制它们的堆叠顺序。网格列和行属性简写 上面介绍的gridcolumnstartgridrowstart、gridcolumnendgridrowend四个属性还可以使用gridrowstart和gridrowend进行简写。 语法：。item｛gridcolumn：gridrow：｝ 属性值：strong每一个都接受与上面四个属性相同的值，包括跨度（span）。liul 如下示例：。itemc｛gridcolumn：3span2；gridrow：thirdline4；｝ 如果没有声明结束值，则默认情况下该项目将跨越1个网格。网格区域gridarea 使用此属性可以命名一个网格区域，以便在gridtemplateareas属性创建的模板中引用此网格区域，或者作为gridrowstartgridcolumnstartgridrowendgridcolumnend的更短的简写。 语法如下：。item｛gridarea：｝ 属性值：命名的网格区域名称。strong以数字或名称命名的网格线，和上面介绍的属性用法一样。liul 如下示例： 为网格区域分配名称的一种方式。itemd｛gridarea：｝ 作为简写。itemd｛gridarea：1col4startlastline6；｝ 参考资料： https：csstricks。comsnippetscsscompleteguidegridpropgridtemplateareas https：developer。mozilla。orgzhCNdocsWebCSSgrid
国庆假期，带你领略大西北的豪迈i913600K首发评测lntel史上最香的桌面处理器医美业降温爱美客华熙生物昊海生科多元战升级战怎么打？小米造车成功了！双电机四驱系统，配备小爱同学，17。99万元游戏元宇宙发展趋势展望分析南航在垂直石墨烯纳米壁中的EMI屏蔽性能研究中取得进展莱万告别在拜仁这八年很特别很愉快，会回来向大家好好道别我爱的地方叫乌镇2022下半年，关于中国经济环境中的风口机遇分析思考南通公布八大精品旅游线路苹果让大家担心的事情还是发生了，iPadPro2022也要用关于儿童乳牙的小知识，你知道多少？