Sep 13, 2018
3 min read
Basics of CSS Grid -8
Welcome to the final part of the series. Here we will create a real project for album layout. You can find part-7 here.
We will use this codepen for the album layout page. The basic code without any style(except the general style) is here.
<body><div class="albums">
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=1">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis, excepturi!</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=2">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">short.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=3">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=4">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=5">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=6">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=7">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=8">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=9">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div>
<div class="album">
<img class="album__artwork" src="https://source.unsplash.com/random/300x300?v=10">
<div class="album__details">
<h2>Album Title</h2>
<p class="album__artist">Artist Name</p>
<p class="album__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.</p>
</div>
</div></div><style></style>
</body>
We have an albums class, which contains all the album. Each album then have a random image of size 300x300 from unsplash. Then there is an album__details class, which contains a heading(h2), the paragraph with album__artist class and also one or two paragraph with album__desc class.
You can read the rest of the blog from my site. Link for the same is below.
This concludes the CSS Grid series. Hoping you learned something useful from it.
