原始样式

作为资深的ctrl+c程序员，很早之前找了个友链样式，但是排版比较乱🙃

原始CSS

  .friends {
  display: flex;
  flex-wrap: wrap;
 }

更改布局

为了更整齐，做了两列的布局😐

新布局CSS

.friends {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20% 20%;
grid-gap: 5px;
    }

新问题

手机浏览器打开，由于文本长度不同，导致高度参差不齐

解决办法

我选择将电脑改为两列排版，手机为单行排版，用 @media (min-width:767px)如下，意思是当小于767px时 .friends 不显示

    @media (min-width:767px)
        {
    .friends {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 20% 20%;
        grid-gap: 5px;
            }
        }

成果

大半年没发文章了，又成功水了一篇文章