原始样式

作为资深的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;
        }
    }

成果

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