CSS Title Cards with Grid Layout — CodePel (2024)

This lightweight CSS code snippet helps you to create cards with title, description, meta info arranged in a grid layout. You can use these cards to display blog posts, products or portfolio items on your website. It uses CSS flex property for card inner elements and grid property to arrange cards in a responsive grid layout.

How to Create CSS Title Cards with Grid Layout

First of all, load the Font Awesome CSS (for icons) by adding the following CDN link into the head tag of your HTML document. (This is optional)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Create the HTML structure for cards as follows:

<section class="cards"><!-- card 1 --> <article class="card"> <picture class="thumbnail"> <img class="category__01" src="https://abbeyjfitzgerald.com/wp-content/uploads/2018/01/cloud.svg" alt="" /> </picture> <div class="card-content"> <p class="category category__01">Cloud Storage</p> <h2>Photo Storage</h2> <p>TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.</p> </div><!-- .card-content --> <footer> <div class="post-meta"> <span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span> <span class="comments"><i class="fa fa-comments"></i><a href="#"> 14 comments</a></span> </div> </footer> </article><!-- card 2 --> <article class="card"> <picture class="thumbnail"> <img class="category__02" src="https://abbeyjfitzgerald.com/wp-content/uploads/2018/01/camera-1.svg" alt="" /> </picture> <div class="card-content"> <p class="category category__02">Photo Technology</p> <h2>Image Formatting</h2> <p>TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.</p> </div><!-- .card-content --> <footer> <div class="post-meta"> <span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span> <span class="comments"><i class="fa fa-comments"></i><a href="#"> 11 comments</a></span> </div> </footer> </article><!-- card 3 --> <article class="card"> <picture class="thumbnail"> <img class="category__03" src="https://abbeyjfitzgerald.com/wp-content/uploads/2018/01/list-1.svg" alt="" /> </picture> <div class="card-content"> <p class="category category__03">Data Management</p> <h2>Document Organization</h2> <p>TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.</p> </div><!-- .card-content --> <footer> <div class="post-meta"> <span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span> <span class="comments"><i class="fa fa-comments"></i><a href="#"> 15 comments</a></span> </div> </footer> </article><!-- card 4 --> <article class="card"> <picture class="thumbnail"> <img class="category__04" src="https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/browser-icon-01.svg" alt="" /> </picture> <div class="card-content"> <p class="category category__04">Product Management</p> <h2>Product Requirements</h2> <p>TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.</p> </div><!-- .card-content --> <footer> <div class="post-meta"> <span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span> <span class="comments"><i class="fa fa-comments"></i><a href="#"> 12 comments</a></span> </div> </footer> </article><!-- card 5 --> <article class="card"> <picture class="thumbnail"> <img class="category__02" src="https://abbeyjfitzgerald.com/wp-content/uploads/2018/01/camera-1.svg" alt="" /> </picture> <div class="card-content"> <p class="category category__02">Photo Technology</p> <h2>Image Techniques</h2> <p>TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.</p> </div><!-- .card-content --> <footer> <div class="post-meta"> <span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span> <span class="comments"><i class="fa fa-comments"></i><a href="#"> 18 comments</a></span> </div> </footer> </article> <!-- card 6 --> <article class="card"> <picture class="thumbnail"> <img class="category__01" src="https://abbeyjfitzgerald.com/wp-content/uploads/2018/01/cloud.svg" alt="" /> </picture> <div class="card-content"> <p class="category category__01">Cloud Storage</p> <h2>Image Upload</h2> <p>TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.</p> </div><!-- .card-content --> <footer> <div class="post-meta"> <span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span> <span class="comments"><i class="fa fa-comments"></i><a href="#"> 19 comments</a></span> </div> </footer> </article></section>

Finally, add the following CSS styles to your project in order to style the cards.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}body { font-family: "Montserrat";}a { text-decoration: none; color: orange;}h2 { color: #000; margin: 2rem 0 .5rem; font-size: 1.25rem; font-weight: 400; text-transform: uppercase;}img { display: block; border: 0; width: 100%; height: auto;}/*************************** Cards *******************************/.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* see notes below */ grid-auto-rows: minmax(200px, auto); grid-gap: 1rem;}.card { /*height: 200px;*/ /*background: red;*/ border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); display: flex; /* -webkit-box-orient: vertical; */ /* -webkit-box-direction: normal; */ -ms-flex-direction: column; flex-direction: column; position: relative; color: #5d5e5e;} /* li item */.thumbnail img { fill: #c7c4c4; height: 135px; opacity: .25; /* padding: 1.5rem; */}.card-content { font-size: .75rem; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}.panel.card-panel .panel-header { background-color: #ffffff; font-size: .75rem; font-weight: 400; height: 25px !important;}.panel.card-panel .panel-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}.category { font-size: .75rem; text-transform: uppercase;}footer { border-top: 2px solid #e7e7e7; margin: .5rem 0 0; min-height: 30px; font-size: .5rem;}.category { position: absolute; top: 110px; left: 0; color: #fff; background: #e74c3c; padding: 10px 15px; font-size: 14px; font-weight: 600; text-transform: uppercase;}.category__01 { background-color: #50c6db;}.category__02 { background-color: #5d5e5e;}.category__03 { background-color: #51bb7b;}.category__04 { background-color: #f47820;}.category__05 { background-color: #8350a0;}.post-meta { margin-top: .5rem;}.comments { margin-left: .5rem;}

That’s all! hopefully, you have successfully created title cards with grid layout. If you have any questions or suggestions, feel free to comment below.