grid布局简单记录

grid布局不要太好用！用grid方式写了个简单的布局，代码很简单，记录一下。

html代码：

< div class= "parent" >

< div class= "child header" ></ div >

< div class= "child sideBar" ></ div >

< div class= "child content" ></ div >

< div class= "child footer" ></ div >

</ div >

css代码：

html,body {

width: 100%;

height: 100%;

}

.parent {

display: grid;

width: 80%;

height: 100%;

margin: 0 auto;

grid-gap: 5px;

}

.header {

grid-column-start: 1;

grid-column-end: 6;

grid-row: 1/ 2;

}

.sideBar {

grid-column: 1/ 2;

grid-row: 2/ 5;

}

.content {

grid-column: 2/ 6;

grid-row: 2/ 5;

}

.footer {

grid-column: 1/ 6;

grid-row: 5/ 6;

}

js代码：

( function( document){

var aChild = document. querySelectorAll( ".child");

for( var i= 0, len= aChild. length; i< len; i++) {

aChild[ i]. style. backgroundColor = randomColor();

}

function randomColor() {

var txt = "#";

for( var i= 0; i< 6; i++) {

txt+= Math. floor( Math. random()* 16). toString( 16);

}

return txt;

}

})( document);

目前支持grid布局的浏览器有safari  、 chrome 、firefox 、Edge 、IE10+.