css-布局-grid

<style>
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;//三列，列宽固定100px
  grid-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; */
}