<style>
.box{
display: grid;
grid-template: repeat(3,1fr) / repeat(3,1fr); /*下面有详细解释*/
width: 300px;
height: 300px;
margin: auto;
}
.box>div{
text-align: center;
background-color: #ccc;
line-height: 100px;
font-size: 25px;
}
.box>div:nth-of-type(odd){ /*odd奇数 even偶数*/
background-color: pink;
}
</style>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>grid-template-rows 定义网格中行数和行的高度；
grid-template-columns 定义网格中的列数和列的高度。
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
fr 是为网格布局定义的一个新单位。
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template 是两者的简写
grid-template: repeat(3,1fr) / repeat(3,1fr);
大个个个个儿
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4822/viewspace-3161735/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
C++：虚析构与纯虚析构
下一篇：
MySQL连接数太多应该怎么解决？
请登录后发表评论
登录
全部评论
