Learn how to create a responsive blog card grid layout using HTML and CSS. This tutorial covers creating the HTML structure, styling the blog cards with CSS, and creating a grid layout with CSS.
Table of Contents
The Blog card is a component that displays your posts on your blog page. It includes many components such as creation date and time, title, content, post type, etc. To create a beautiful blog card, we must rely on many factors such as a Clear layout, easy understanding, reasonable division of components, etc.
Let's start making these responsive blog card grid layout Using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our responsive blog card.
Below is a block of HTML code that creates a section on a webpage containing three cards, each with a title, description, date, and tag. The section is defined by the <section> element with a class of "cards-wrapper", and the individual cards are created using the <div> element with a class of "card-grid-space" and the <a> element with a class of "card".
Each card contains an image, specified by the CSS custom property --bg-img and a URL for the image, as well as a title specified by the <h1> element, a description specified by the <p> element, a date specified by the <div> element with a class of "date", and a tag specified by the <div> element with a class of "tag".
The first card describes how to create Squid Game-themed loaders using only HTML and CSS, and is tagged with "CSS". The second card describes how to create a search bar with a pulsating effect using HTML and pure CSS, and is also tagged with "CSS". The third card describes how to create a digital clock using HTML, CSS, and JavaScript, and is also tagged with "CSS".
After creating the files just paste the below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our responsive blog card using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the blog card is in place, the next step is to add styling to the blog card using CSS. CSS allows us to control the visual appearance of the card, including things like layout, color, and typography.
Next, we will create our CSS file. We will use some basic CSS rules in this file to create our blog card.
The code starts with the @import rule that imports two external font styles from Google Fonts (Heebo and Open Sans) to be used within the UI.
The :root selector defines some global variables using the -- syntax, which can be used throughout the code to maintain consistency and make changes easily. In this case, it defines a primary color variable and a transition time variable.
The * selector applies the box-sizing property to all elements, which includes padding and border in the element's total width and height.
The body selector defines the font family, sets a minimum height of the viewport (100vh), and sets a background color.
The a selector defines the link color as the same as the parent element.
The .cards-wrapper selector defines a grid layout for the container element that holds the cards. The grid columns are set to 3 columns, and the gap between the columns is set to 4rem. It also adds padding, centers the grid horizontally and vertically, and sets the container's width to the width of its content.
The .card selector defines the styling for the card element. It sets the font family to Heebo, defines a background image with a gradient filter and the background size and position to cover and center, respectively. It sets the height and width of the card, font size, font color, border radius, padding, and box-shadow. It also defines a transition effect to be applied to all CSS properties and uses the var() function to set the transition time to the previously defined variable. It sets the position to relative and defines an overflow property to handle overflowing content. Additionally, it defines a border color.
The .card:hover selector defines the styling for the card element when the mouse hovers over it. In this case, it applies a rotation effect.
The .card h1 selector defines the styling for the card's heading.
The .card p selector defines the styling for the card's paragraphs.
The .card .tags selector defines a flex container for the tags.
The .card .tags .tag selector defines the styling for each tag.
The .card .date selector defines the styling for the date.
The .card:before and .card:after selectors define two pseudo-elements that will be used as background circles behind the card. These are initially set to scale zero and placed to the top left of the card. They are set to grow and fill the card's dimensions when the card is hovered over.
The .card-grid-space .num selector defines a style for a heading element used in a different card layout.
The .info selector defines the styling for an element used to display information at the top of the UI. It is set to display as a flex container and has an image and text.
Finally, there are several media queries that adjust the layout and styling of the cards and other elements based on the device's screen width. For example, it changes the number of columns in the grid layout, adjusts the padding and margins, and sets the display mode of elements to block.
This will give our card an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');
:root {
--color: #3c3163;
--transition-time: 0.5s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: 'Open Sans';
background: #fafafa;
}
a {
color: inherit;
}
.cards-wrapper {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 4rem;
padding: 4rem;
margin: 0 auto;
width: max-content;
}
.card {
font-family: 'Heebo';
--bg-filter-opacity: 0.5;
background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
height: 20em;
width: 15em;
font-size: 1.5em;
color: white;
border-radius: 1em;
padding: 1em;
/*margin: 2em;*/
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
box-shadow: 0 0 5em -1em black;
transition: all, var(--transition-time);
position: relative;
overflow: hidden;
border: 10px solid #ccc;
text-decoration: none;
}
.card:hover {
transform: rotate(0);
}
.card h1 {
margin: 0;
font-size: 1.5em;
line-height: 1.2em;
}
.card p {
font-size: 0.75em;
font-family: 'Open Sans';
margin-top: 0.5em;
line-height: 2em;
}
.card .tags {
display: flex;
}
.card .tags .tag {
font-size: 0.75em;
background: rgba(255,255,255,0.5);
border-radius: 0.3rem;
padding: 0 0.5em;
margin-right: 0.5em;
line-height: 1.5em;
transition: all, var(--transition-time);
}
.card:hover .tags .tag {
background: var(--color);
color: white;
}
.card .date {
position: absolute;
top: 0;
right: 0;
font-size: 0.75em;
padding: 1em;
line-height: 1em;
opacity: .8;
}
.card:before, .card:after {
content: '';
transform: scale(0);
transform-origin: top left;
border-radius: 50%;
position: absolute;
left: -50%;
top: -50%;
z-index: -5;
transition: all, var(--transition-time);
transition-timing-function: ease-in-out;
}
.card:before {
background: #ddd;
width: 250%;
height: 250%;
}
.card:after {
background: white;
width: 200%;
height: 200%;
}
.card:hover {
color: var(--color);
}
.card:hover:before, .card:hover:after {
transform: scale(1);
}
.card-grid-space .num {
font-size: 3em;
margin-bottom: 1.2rem;
margin-left: 1rem;
}
.info {
font-size: 1.2em;
display: flex;
padding: 1em 3em;
height: 3em;
}
.info img {
height: 3em;
margin-right: 0.5em;
}
.info h1 {
font-size: 1em;
font-weight: normal;
}
/* MEDIA QUERIES */
@media screen and (max-width: 1285px) {
.cards-wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 900px) {
.cards-wrapper {
grid-template-columns: 1fr;
}
.info {
justify-content: center;
}
.card-grid-space .num {
margin-left: 0;
text-align: center;
}
}
@media screen and (max-width: 500px) {
.cards-wrapper {
padding: 4rem 2rem;
}
.card {
max-width: calc(100vw - 4rem);
}
}
@media screen and (max-width: 450px) {
.info {
display: block;
text-align: center;
}
.info h1 {
margin: 0;
}
} Final Output:
Conclusion:
In this tutorial, we learned how to create a pure CSS responsive blog card grid layout using HTML and CSS. We started by setting up the HTML structure for the blog card and then styled the card with CSS to create the desired layout. We added responsiveness to the layout using media queries, which allowed the layout to adapt to different screen sizes. Finally, we used CSS grid to create a grid layout for the blog cards and added responsiveness to the grid layout using media queries. With the knowledge gained from this tutorial, you can now create a beautiful and responsive blog card grid layout for your website.
If you want to learn more about CSS and responsive design, check out our other tutorials and resources. Thank you for reading!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
