How to Create a grid which has 4 cards Grid with responsive view?
Posted By: Rimjhim Jain Published: 14, Jan 2024
Table of Contents
Create a grid which has 4 cards. Each card has a thumbnail image, title and a description. Grid should be responsive for the following viewports: >= 320px (one column), >= 768px (two column), >= 1200px (four column)
Step 1) Add HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid of 4 cards</title>
</head>
<body>
<div class="row">
<div class="column">
<div class="card">
<img src="https://thenazariyafoundation.org/image/image_nazariya/cache/catalog/demo/product/IMG_1666-507x360.PNG">
<h2>Title of my card</h2>
<p>Description of my card.</p>
</div>
</div>
<div class="column">
<div class="card">
<img
src="https://thenazariyafoundation.org/image/image_nazariya/cache/catalog/demo/product/IMG_1666-507x360.PNG">
<h2>Title of my card</h2>
<p>Description of my card.</p>
</div>
</div>
<div class="column">
<div class="card">
<img
src="https://thenazariyafoundation.org/image/image_nazariya/cache/catalog/demo/product/IMG_1666-507x360.PNG">
<h2>Title of my card</h2>
<p>Description of my card.</p>
</div>
</div>
<div class="column">
<div class="card">
<img
src="https://thenazariyafoundation.org/image/image_nazariya/cache/catalog/demo/product/IMG_1666-507x360.PNG">
<h2>Title of my card</h2>
<p>Description of my card.</p>
</div>
</div>
</div>
</body>
</html>
Step 2) Add CSS:
<style>
.row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 1em;
padding-right: 1em;
}
.column{
flex-basis:25%;
}
.card{
margin: 10px;
border-style: ridge;
}
.card img{
width: 100%;
margin: auto;
display: block;
}
@media screen and (max-width:1199px) {
.column {
flex-basis: 50%;
}
}
@media screen and (max-width:767px) {
.column {
flex-basis: 100%;
}
}
</style>#Note: CSS can be added to HTML documents in 3 ways:
- Inline - by using the style attribute inside HTML elements
- Internal - by using a style element in the head section
- External - by using a link element to link to an external CSS file
Output Screenshots:
For viewports >= 1200px (four column).
For viewports >= 768px (two column).
For viewports >= 320px (one column).
