排名不分先后，按照添加时间排序。 .friends { --link-count-per-row: 1; } @media screen and (min-width: 576px) { .friends { --link-count-per-row: 2; } } @media screen and (min-width: 768px) { .friends { --link-count-per-row: 3; } } .friends { display: grid; grid-template-columns: repeat(var(--link-count-per-row), 1fr); grid-gap: 16px; } .friend-skeleton { height: 280px; display: inline-block; position: relative; } .friend { height: 100%; width: 100%; position: absolute; top: 0; left: 0; transition: 0.67s cubic-bezier(0.19, 1, 0.22, 1); border-radius: var(--radius); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .friend:hover { transform: translateY(-8px); box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12) !important; } .friend-avatar { object-fit: cover; width: 100%; height: 180px; margin: 0 !important; border-radius: 0 !important; } .friend-content { text-align: center; flex: 1; width: 100%; padding: 16px; background: var(--entry); transform: translate3d(0, 0, 0); } .friend-name { font-size: 1.2rem; font-weight: bold; transform: inherit; } .friend-description { font-size: 0.8rem; color: var(--secondary); transform: translate3d(0, 0, 0); } 伞 一只咸鱼的学习记录 HelloWorld的小博客 这里是一个小白的博客 Kenvix 党明学姐 HeoLis We need to go faster and deeper. 🔨 🔨のBlog 异国迷宫的十字路口 一位弱鸡带学生的个人博客 Gaein nidb Gaein nidb的网站 fzf404 fzf的网站 凛凛酱 傻逼凛凛 iNetech Blog 凡心所向，素履所往 vritser 半斤八两 Anduin Xue Software engineer at 𝙈𝙞𝙘𝙧𝙤𝙨𝙤𝙛𝙩. Holk AI researcher 喵雨の小屋 努力学习中… MoreYu 来这里摸鱼吧 fissssssh Chinese software engineer xuthus5 Write code and love life. SeerSu 花有重开日，人无再少年 JimMoen Erlang Developer.
