the first one links to some random shit
<body>
<div class="gridbox">
<div class="item"><a href="https://diogenesprintco.tumblr.com/"><img src="https://images.pexels.com/photos/16046611/pexels-photo-16046611.jpeg"></a></div>
/// ^ you can see I have the img nested inside the href so the image itself is the hyperlink text ///
<div class="item"><img src="https://images.pexels.com/photos/15824723/pexels-photo-15824723.jpeg"></div>
<div class="item"><img src="https://images.pexels.com/photos/15011656/pexels-photo-15011656.jpeg"></div>
<div class="item"><img src="https://images.pexels.com/photos/188014/pexels-photo-188014.jpeg"></div>
<div class="item"><img src="https://images.pexels.com/photos/14519233/pexels-photo-14519233.jpeg"></div>
<div class="item"><img src="https://images.pexels.com/photos/33672140/pexels-photo-33672140.jpeg"></div>
<div class="item"><img src="https://images.pexels.com/photos/27514719/pexels-photo-27514719.jpeg"></div>
...and so on...
</div>
</body>
body {
whatever; /// whatever u want in here obviously
}
.gridbox {
height: auto; ///this makes it so that the grid container resizes to fit whatever content is inside
width: 1100px;
/// ^ there's some math required here for five columns, I did basically (5x[desired image width])+(5x(2x[image margin width]))...and then ended up eyeballing it anyway cause I can't do math like that LOL///
margin: 20px auto; ///this centers it in the body of the page with 20px on top and bottom//
display: flex; ///this makes it a flexbox, for more info see this///
flex-flow: row wrap; ///this makes the order of the flexbox items go left-to-right and then wrap around once it can't fit anymore///
justify-content: center; ///this makes flexbox rows with extra space bunch up in the middle///
align-items: stretch; ///this makes the flex items take up the entire height of the row///
border: 5px solid black; ///this is just so you could see the borders of the box///
padding: 10px 10px; ///this gives a 10px gap between the borders and the content
}
.item {
display: block; ///turns it into a block element instead of an inline since it's not meant to be text///
height: 200px;
width: 200px;
background: none;
margin: 10px; ///this gives a space between items///
text-align: center;
box-sizing: border-box; ///this makes it so that padding or content doesn't resize the box it just pushes stuff towards the center of it///
}
.item img {
height: 100%;
width: 100%; ///these make it take up the whole width and height of the .item container///
object-fit: cover; ///this crops it so it covers the whole container without changing aspect ratio or squashing it///
border-radius: 10px; ///this makes it have rounded corners///
}
last.fm widget / widget source