Link Image Icon Grid

Tags:

Description:

This is a grid layout that I use for displaying album art on my profile. Might be useful for other people. It fills available column space so it should also look fine on mobile.

Example:

<div class="iconGrid">
     <!-- every <a> tag is a new icon in the grid -->
     <a href="https://sewerslvt.bandcamp.com/" target="_blank">
          <img alt="sewerslvt avatar" src="https://f4.bcbits.com/img/0025072663_21.jpg"/>
          <span>Sewerslvt</span>
     </a>
     <a href="https://goreshit.bandcamp.com/" target="_blank"> 
          <img alt="goreshit avatar" src="https://f4.bcbits.com/img/0014872378_21.jpg"/>
          <span>goreshit</span>
     </a>
</div>


also mostly made this as a test for uploading layouts lol

Preview:

Code:

<!-- (c) Layout created by Cherry (https://layouts.spacehey.com/layout?id=3432) --> <style> .iconGrid { display: grid; grid-template-columns: repeat(auto-fill, 3.5rem); grid-gap: 0.4rem; } .iconGrid > a { padding: 0.1rem; text-decoration: none; } .iconGrid > a > img { width: 100%; height: auto; display: block; border: white 1px solid; } .iconGrid > a > span { display: block; text-align: center; font-size: 0.6rem; } </style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.