网站开发专业职业规划,施工企业现状,手机网站开发教程,自动化产品的网站建设css网格布局
常用属性 display: grid; //开启网格grid-template-columns: 2fr 1fr 1fr 1fr 1fr; //设置多少列每列宽度grid-gap: 10px; // 设置表格之间间距grid-template-rows: 50px 50px 50px 50px; // 设置多少行 每行的高度grid-column : 1 //占据位置 占据1格grid-colu…css网格布局
常用属性 display: grid; //开启网格grid-template-columns: 2fr 1fr 1fr 1fr 1fr; //设置多少列每列宽度grid-gap: 10px; // 设置表格之间间距grid-template-rows: 50px 50px 50px 50px; // 设置多少行 每行的高度grid-column : 1 //占据位置 占据1格grid-column : 1 / 3 //占据位置 占据1、2格grid-column : 2 / 4 //占据位置 占据2、3格grid-row: 1 //占据位置 占据1格grid-row : 1 / 3 //占据位置 占据1、2格grid-row: 2 / 4 //占据位置 占据2、3格编写效果 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;background-color: rgb(31, 114, 187);}#box{padding: 30px;display: grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr;grid-gap: 10px;grid-template-rows: 50px 50px 50px 50px;}#boxdiv{background-color: aliceblue;}#boxdiv:nth-child(1){grid-column: 1;grid-row: 1 / 3;}#boxdiv:nth-child(2){grid-column: 2 / 4;grid-row: 1;}#boxdiv:nth-child(3){grid-column: 4 / 6;grid-row: 1;}#boxdiv:nth-child(4){grid-column: 2;grid-row: 2;}#boxdiv:nth-child(5){grid-column: 3;grid-row: 2;}#boxdiv:nth-child(6){grid-column: 4 / 6;grid-row: 2;}#boxdiv:nth-child(7){grid-column: 1 ;grid-row: 3;}#boxdiv:nth-child(8){grid-column: 2 / 4;grid-row: 3 / 5;}#boxdiv:nth-child(9){grid-column: 4;grid-row: 3;}#boxdiv:nth-child(10){grid-column: 5;grid-row: 3 / 5;}#boxdiv:nth-child(11){}
/style
bodydiv idboxdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/divdiv9/divdiv10/divdiv11/divdiv12/div/div
/body
/html
