简介
- 这两个属性专门用于设置多出来的项目的拜访
- 比如,容器划分了九个空间,但是目前的项目有十个
<body>
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
ul {
width: 600px;
height: 600px;
border: 3px solid rebeccapurple;
font-weight: bold;
color: white;
text-align: center;
line-height: 100px;
font-size: 40px
}
li:nth-child(even) {
background-color: red;
}
li:nth-child(odd) {
background-color: #000000;
}
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
/* 用来设置多出来的项目的宽和高 */
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<!-- 没有定义 10 的高度,他的高度是由内容撑开的,三个盒子是均分的,多出来的10会占据一行
剩下的空间会被均分
-->
<li>10</li>
</ul>
</body>
- grid-auto-rows用来设置高度
- grid-auto-columns用来设置列的宽度
例子
grid-auto-rows
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
/* 用来设置多出来的项目的宽和高 */
grid-auto-rows:50px; /*设置多出来的行的高度*/
}
效果
我们可以看到多出来的哪一行的高度变小了
grid-auto-rows
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
/* 设置顺序,让列多出来 */
grid-auto-flow: column;
grid-auto-columns: 50px; /*设置多出来的列的宽度*/
}
- 我们先改变了盒子的排列顺序,让列多出来
- 然后我们用属性
grid-auto-columns
,设置了多出来的列的宽度