湛江网站排名,福州seo博客,做北京会所网站哪个好,章丘做网站哪家强网格布局grid
提供了带有行和列的基于网格的布局系统#xff0c;无需使用浮动和定位。
当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时#xff0c;它就会成为网格容器。
更多布局模式可以参考之前的博客#xff1a; CSS—flex布局、过渡transit…网格布局grid
提供了带有行和列的基于网格的布局系统无需使用浮动和定位。
当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时它就会成为网格容器。
更多布局模式可以参考之前的博客 CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性
有关display属性之前也有写过
CSS—显示模式display、float浮动清除浮动的6种方式、定位position、元素溢出overflow 当把网格项目放在网格容器中时引用行号
把网格项目放在列线 1并在列线 3 结束它
.item1 {grid-column-start: 1;grid-column-end: 3;
}
属性描述grid-column定义将项目放置在哪一列上。是 grid-column-start和grid-column-end缩写/br例如grid-column: 2/3;第2列开始第3列结束。grid-row定义将项目放置在哪一行上写法与grid-column类似grid-areagrid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写。也可用于为项目命名。grid-column-gap调整列间隙grid-row-gap调整行间隙grid-gap调整间隙grid-template-columns定义网格布局中的列数并可定义每列的宽度。以空格分隔的列表其中每个值定义相应列的长度。grid-template-rows定义每列的高度justify-content在容器内对齐整个网格。网格的总宽度必须小于容器的宽度 justify-content 属性才能生效。align-content垂直对齐容器内的整个网格。网格的总高度必须小于容器的高度 align-content 属性才能生效。
!DOCTYPE html
html
head
style
.item1 {grid-area: myArea;
}.grid-container {display: grid;grid-template-areas: myArea myArea . . . myArea myArea . . .;grid-gap: 10px;background-color: #2196F3;padding: 10px;
}.grid-container div {background-color: rgba(255, 255, 255, 0.8);text-align: center;padding: 20px 0;font-size: 30px;
}
/style
/head
bodypItem1 的名为 myArea会占据两列两行/pdiv classgrid-containerdiv classitem11/divdiv classitem22/divdiv classitem33/div div classitem44/divdiv classitem55/divdiv classitem66/div
/div/body
/html 【记录学习过程的笔记欢迎大家一起讨论会持续更新】
