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+.