现在的屏幕尺寸非常多，很多列表的ui设计的很好，但是到不同屏幕上却效果差强人意。
下面介绍一个适应屏幕的方案，供参考

核心

先上代码

.content-dik{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  // 适应屏幕的逻辑
      grid-gap: 10px;
    }
    .content-item{
      height: 200px;
      background:#f0f0f0;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      font-size:24px;
      color:#232323;
      text-align:center;
      line-height: 200px;
    }

关键代码其实就是：

 display:grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 

display:grid；不用说。我么说说这个repeat,他是一个函数，参数1 是重复几次，参数2是重复的值。这个auto-fit是一个特殊值，意思是自适应。minmax()，函数意思是最小200px， 最大1fr。

父元素添加这两行代码后，子元素就可以随意适应了，快去试试吧~

image.png

image.png