关于css grid布局的一个问题

Question

尝试写一个可滚动的grid布局

html如下

        <div class="items-area-wrapper">
          <div class="items-area">
            <div v-for="(item,index) in searchList" :key="index" class="item" @click="transToProjectPage(item.id||item.projectId,item.name||item.projectName)">
              <span class="link">{{item.name||item.projectName}}</span>
            </div>
          </div>
        </div> 

css如下

.items-area-wrapper{ 
  margin-top: 15px;
  height: 83%;
  overflow: auto;
  .items-area{
    width: 100%;
    display: grid;
    gap:15px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(auto-fill,41px);
    .item{
      padding: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      cursor:pointer ;
      .link {
        &:hover{                     
          color: #1890ff;
        }    
      }
    }
  }
}

问题

可以看见我把grid-template-rows设置成了奇怪的41px,这是因为我尝试把第一行设置为50px或者30px之类的值,发现除了第一行生效外(第一行是设置的大小),其余行都为41px.想请问大家有遇到过这种问题或者有什么解决方法吗?

Answer 1

你可以试下，items-area 添加个高度hight:100%，
41px 应该是你设置的字体14px 行高1.5 padding 10px 的默认高度14x1.5+10x2
当超出最大高度时 使用 auto-fill ，超出的高度依然会有问题 ，可以直接设置.item 的高度，不在items-area设置