CSS--使用CSSGrid（网格）布局

时间：2023-03-30 16:14:21 CSS

，CSSGrid（网格布局）介绍CSSGrid布局由两个核心组成部分组成：父元素和子元素，父元素就是实际的网格（grid）,子元素是网格里面的内容。下面是一个父元素和六个子元素1

56要将父元素变成网格（grid），只需将其display属性设置为grid高度：350px；/*背景：#ccc;*/保证金：0自动；网格间隙：5px；}.item{border:1pxsolidblack;框大小：边框框；}.div1{网格列开始：1;网格列端：3；/*(div1占据从第一条网格线开始到第三条网格线结束)*/line-height:100px;文本对齐：居中；背景：rgb(252,0,0);/*网格列：1/3；（这是缩写形式）*/}.div2{line-height:100px;文本-??对齐：居中；背景：RGB（252、134、0）；}.div3{网格行开始：2；网格行尾：4；/*网格行：2/4；（这是缩写形式）*/line-height:200px;文本对齐：居中；背景：rgb（21、207、108）；}.div4{网格列开始：2;网格列端：4；行高：100px；文本对齐：居中；背景：rgb（18、21、189）；/*网格列：2/4；（这是缩写形式）*/}.div5{line-height:100px;文本对齐：居中；背景：RGB（16、170、197）；}.div6{行高：100px；文本对齐：居中；背景：rgb(172,126,199);}上面代码中的网格线（图中箭头所指的地方就是网格线）：2、响应式网格布局与上面类似（添加以下内容）使用grid-template-columns属性创建一个12列的网格，每列是一个单位宽度（总宽度的1/12）使用grid-template-rows属性创建一个3行的网格使用grid-gap属性创建一个网格内的网格在item之间添加空隙的代码如下：top（一个点代表一个空白的格子），所以左右有一个格子距离。中间1中间2，所以可以用空白格子来布局你要拍的网页bottom（一个点代表一个空白格子），所以从右边有三个格子的距离。添加grid-template-areas这个属性叫做gridarea，也叫templatearea，方便我们进行布局实验。效果图：][3]代码如下：（具体描述在代码中）.container{display:grid;网格模板列：重复（12、1fr）；网格模板行：50px350px50px；网格间隙：5px；网格模板区域：“。hhhhhhhhhh。”“mmcccccccccc”“fffffffff...”；}.container>div{border:1pxsolid#ccc;框大小：边框框；}.header{文本对齐：居中；行高：50px；网格区域：h；颜色：RGB（219、52、169）；}.menu{网格区域：m；文本对齐：居中；行高：350px；}.content{文本对齐：居中；行高：350px；网格区域：c；颜色：RGB（25、158、69）；}.footer{颜色：rgb(212,112,18);文本对齐：居中；行高：50px；网格区域：F;}

上一篇：js放大镜效果

下一篇：CSS-3D轮播效果

CSS--使用CSSGrid（网格）布局相关文章