站点推广策略包括,怎样建设购物网站,科技公司网站版面设计,大数据营销获客一、理解 grid 二、理解 css grid 布局
CSS Grid布局是一个二维的布局系统#xff0c;它允许我们通过定义网格和网格中每个元素的位置和尺寸来进行页面布局。CSS Grid是一个非常强大的布局系统#xff0c;它不仅可以用于构建网格布局#xff0c;还可以用于定位元素#xf…一、理解 grid 二、理解 css grid 布局
CSS Grid布局是一个二维的布局系统它允许我们通过定义网格和网格中每个元素的位置和尺寸来进行页面布局。CSS Grid是一个非常强大的布局系统它不仅可以用于构建网格布局还可以用于定位元素并且可以很好地处理复杂的布局。
CSS Grid布局由两个主要的组成部分组成容器和项目。容器是我们要定义网格的元素它的display属性必须设置为grid或inline-grid。而项目是容器内的元素它们被放置在网格中并占据一个或多个网格单元。
要创建一个网格布局我们需要先定义一个网格容器然后使用grid-template-columns和grid-template-rows属性定义行和列的大小和数量。我们还可以使用grid-column和grid-row属性来控制每个项目在网格中的位置。
除了基本的网格布局CSS Grid还提供了许多其他的布局特性如重叠元素、自适应大小、对齐和间距等。这使得我们能够使用CSS Grid来创建各种各样的布局从简单的网格到复杂的响应式布局以满足不同的设计需求。
CSS Grid布局是一个灵活、强大和易于使用的布局系统它提供了许多功能来帮助我们创建各种各样的布局。它已经受到了广泛的支持并且越来越受到前端开发人员的重视。
三、grid布局有哪些核心概念
序号概念概念描述1网格容器(Grid Container)包含整个CSS Grid布局的父元素通过设置该元素的display属性为grid或inline-grid即可将其定义为网格容器。2网格线(Grid Line)网格容器中划分行列的分割线可以通过数字或名称进行标识。3网格轨道(Grid Track)两个相邻网格线之间的空间称为网格轨道可以是行轨道或列轨道可以通过设置grid-template-columns和grid-template-rows属性来定义。4网格单元(Grid Cell)两个相邻行列网格线交叉形成的方块区域用于定义网格中的项目。 由四个相邻的网格线所围成的矩形区域是网格中的基本单位。5网格项(Grid Item)网格容器中的任何元素都可以成为网格项规定了网格项在网格单元中的位置和大小。 位于网格单元中的内容可以是任何HTML元素。6网格区域(Grid Area)由多个网格单元组成的矩形区域用于定义项目的位置和跨度。 可以通过grid-template-areas属性进行定义。7网格模板(Grid Template)通过设置grid-template-columns和grid-template-rows属性来定义网格轨道的大小和数量。 描述网格行数、列数和每个单元格的大小可以通过grid-template-rows、grid-template-columns和grid-template-areas属性进行定义。8网格属性grid property用于控制网格项在网格容器中的位置和大小包括grid-row、grid-column、grid-row-start、grid-column-start、grid-row-end、grid-column-end等属性。9对齐(Alignment)设置网格项在网格单元中水平和垂直方向的对齐方式可以分别使用justify-items和align-items属性也可以使用justify-self和align-self属性分别定义每个网格项的对齐方式。10重叠(Overlap)CSS Grid布局允许网格项在网格单元中互相重叠这可以通过设置grid-template-areas属性来实现。理解这些核心概念可以更好地理解和使用CSS Grid布局。
四、浏览器兼容性
不考虑老旧的浏览器已经是可以使用了。
旧版浏览器可能需要添加一些前缀才能支持CSS Grid布局而新版浏览器已经不需要前缀了。在编写CSS Grid布局时建议用适当的前缀完成兼容性工作现在css工具也可以自动添加。
如果您的站点需要支持较老版本的浏览器可以使用其他CSS布局方式来弥补CSS Grid布局的缺陷。例如可以使用Flexbox布局或传统的基于表格的布局来实现相应的设计效果。 五、当设置了 grid 布局后哪些属性将失效
当设置了 grid 布局后以下属性将失效序号属性备注1float2clear3display: table-cell4vertical-align5width通过 grid-template-columns 和 grid-template-rows 定义列和行宽度6height通过 grid-template-columns 和 grid-template-rows 定义列和行高度7margin相关属性margin-top、margin-right、margin-bottom、margin-left、margin、margin-inline、margin-block8padding相关属性padding-top、padding-right、padding-bottom、padding-left、padding、padding-inline、padding-block9display: inline-gridinline-grid 只能定义单行/单列以上属性失效是因为 grid 布局已经提供了更加灵活和高效的布局方式
六、grid 常用属性
序号属性属性描述1display用于定义网格容器的类型可以设置为grid或inline-grid2grid-template-columns grid-template-rows用于定义网格的列数和行数可以使用长度、百分比、auto、minmax()等值进行设置。3grid-template-areas用于定义网格区域在一个字符串中使用空格分隔每个单元格可以使用句点.表示一个空单元格使用名称为none的单元格将不被占用4grid-template用于同时定义网格的列数、行数和区域。5grid-column-gap grid-row-gap用于定义网格行和列之间的间隙6grid-auto-columns grid-auto-rows用于定义自动网格的列数和行数当网格中的单元格无法满足网格模板时会使用自动网格填充剩余空间。7grid-auto-flow用于定义自动网格的方向可以设置为row、column或dense。8grid-column-start grid-column-end grid-row-start grid-row-end用于定义单元格的位置通过网格线的位置进行设置。9grid-column grid-row用于同时定义单元格的开始和结束位置。10grid-area用于为单元格定义一个名称以便在grid-template-areas属性中进行引用了解和掌握这些属性可以帮助我们更好地使用CSS Grid布局来实现网页布局。
七、DEMO
布局大屏方案grid_大屏布局方案_snowli的博客-CSDN博客
八、欢迎交流指正
参考链接
css3-flex布局基础使用 / Flexbox布局_snowli的博客-CSDN博客
grid布局详解 - Des李白 - 博客园
