<style> .d2 {display: grid;grid-template-columns: 100px 100px 100px;//三列,列宽固定100pxgrid-template-rows: 100px 100px 100px; /* 设置行间距和列间距为20px */gap: 20px; } .d2>div {background: pink;text-align: center; } .d2>div:nth-child(2n){ background: yellow; } </style><div class="d2"><div class="d2-1">1</div><div class="d2-2">2</div><div class="d2-3">3</div><div class="d2-4">4</div><div class="d2-5">5</div><div class="d2-6">6</div><div class="d2-7">7</div><div class="d2-8">8</div><div class="d2-9">9</div> </div>
效果:
1.列宽列高根据内容自动伸缩,取最大的那个
.d2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
/* 设置行间距和列间距为20px */
gap: 20px;
}
2.列宽等于最大内容宽度
.d2 {
display: grid;
grid-template-columns: max-content max-content max-content;
grid-template-rows: auto auto auto;
/* 设置行间距和列间距为20px */
gap: 20px;
}
3.
.d2 {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
/* 设置行间距和列间距为20px */
gap: 20px;
}
4.多了会自动换行
4.
.d2 {
display: grid;
grid-template-columns: repeat(auto-fill,100px);//自动填充,每列100px宽度
grid-template-rows: auto auto auto;
/* 设置行间距和列间距为20px */
gap: 20px;
}
5.单元格内容自动换行
.d2 {
display: grid;
grid-template-columns: repeat(auto-fill,100px);//自动填充,每列100px宽度
grid-template-rows: auto;
/* 设置行间距和列间距为20px */
gap: 20px;
}
.d2>div {
background: pink;
//text-align: center;
word-wrap: break-word; /* 或者 overflow-wrap: break-word; */
}