10分钟理解CSS3 Grid布局

}

#content{

display: grid;

grid-template-columns: 33.3% 33.3% 33.3%;

max-width: 960px;

margin: 0 auto;

}

#content div{

background: lightgrey;

padding: 30px;

}

#content div:nth-child(even){

background: skyblue;

}

效果：

当我们设置了display: grid和grid-template-columns: 33.3% 33.3% 33.3%后#content就被划分成了三行三列的grid，此时#content被称为grid container，而#content的子元素称为grid item。

我们也可以任意改变column的个数和宽度，比如：

#content{

grid-template-columns: 10% 20% 30% 40%;

}

效果：