在CSS网格布局中使用网格模板- *属性的方法

这篇文章给大家分享的是有关在CSS网格布局中使用网格模板- *属性的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

网格模板属性主要用于创建显示网格,其中grid-template-rows和grid-template-columns用于定义网格的行和列,grid-template-areas属性用于指定命名网格区域

在CSS3中引入了新的网格布局(网格布局),主要用来适应显示和设计技术的发展尤其是对于一些响应式设计。它的出现主要是建立

一个稳定可预料且语义正确的网页布局模式,用来替代过往表现不稳定且繁琐的表,以流动及JS脚本混合技术来实现的网页动态布局。今天在文章中将要介绍的是网格属性中的网格模板- *属性的用法,具有一定参考价值,希望对大家有所帮助

<强>显式和隐式网格

要理解网格模板- *属性,我们首先需要了解显式网格和隐式网格的含义

显式网格用于创建显式网格的网格模板- *属性(属性)定义,其中grid-template-rows, grid-template-columns以及grid-template-areas一起定义了明确的网格

隐式网格表示的是网格容器通过向网格添加隐式网格线来生成隐式网格轨道。这些线与显式网格一起形成隐式网格。换句话说在网格容器内有网格单元,使用网格模板- *属性定位和调整大小的任何单元格都构成显式网格的一部分,使用此属性定位/调整大小的任何网格单元格都不构成隐式网格的一部分

<强>网格模板- *属性的具体用法

网格模板- *属性用于创建一个显式的网格,主要用于定义网格单元的位置和大小

<强>特性:

grid-template-rows(网格模板行),网格模板列(grid-template-columns),网格模板区域(grid-template-areas)

<强>示例:

通过grid-template-rows属性来创建一行高为100 px的网格