How to Create Responsive Column Cards with CSS ?

Last Updated : 23 Jul, 2024

Creating a responsive card layout is very beneficial in development. These cards are a great way to display content in a neat and organized manner.

You can create responsive cards using the below approaches.

Table of Content

Using Flexbox
Using CSS Grid

Using Flexbox

The display: flex property establishes a flex container, enabling flexbox layout for its children. flex-wrap: wrap property specifies that the flex items should wrap onto multiple lines if necessary. We have also used CSS media queries to adjust the card width and margin based on the viewport size.

Example: The below code will explain the use of the CSS flexbox and its properties to create responsive cards.

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Card</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, 
								initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
</head>

<body>
	<div style="text-align: center;">
		<h1 style="color: green;">
			GeeksforGeeks
		</h1>
		<h2>
			Creating responsive cards 
			<br/>using HTML and CSS
		</h2>
	</div>
	<div class="card-container">
		<div class="card">
			<h1>HTML</h1>
			<p>
				HyperText Markup Language or HTML is the 
				standard markup language for documents 
				designed to be displayed in a web browser. 
				It defines the content and structure of web
				content.
			</p>
		</div>
		<div class="card">
			<h1>CSS</h1>
			<p>
				Cascading Style Sheets is a style sheet 
				language used for specifying the presentation 
				and styling of a document written in a markup 
				language such as HTML or XML. CSS is a
				cornerstone technology of the World Wide Web, 
				alongside HTML and JavaScript.
			</p>
		</div>
		<div class="card">
			<h1>JavaScript</h1>
			<p>
				JavaScript, often abbreviated as JS, is a 
				programming language and core technology 
				of the World Wide Web, alongside HTML and CSS.
				As of 2024, 98.9% of websites use JavaScript 
				on the client side for webpage behavior, 
				often incorporating third-party libraries.
			</p>
		</div>
	</div>
</body>

</html>

CSS

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 calc(33.33% - 20px);
    padding: 20px;
    box-sizing: border-box;
    background: lightgreen;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .card {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .card {
        flex: 1 1 calc(100% - 20px);
    }
}

Output:

Using CSS Grid

The grid-container class is applied to an element that serves as a container for a grid layout. The CSS display: grid property sets the container to be a grid container, meaning its direct children will be grid items.

Example: The below code uses the CSS grid properties to create responsive cards.

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Card</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, 
								initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
</head>

<body>
	<div style="text-align: center;">
		<h1 style="color: green;">
			GeeksforGeeks
		</h1>
		<h2>
			Creating responsive cards
			<br/>using HTML and CSS.
		</h2>
	</div>
	<div class="card-container">
		<div class="card">
			<h1>HTML</h1>
			<p>
				HyperText Markup Language or HTML is the 
				standard markup language for documents 
				designed to be displayed in a web browser. 
				It defines the content and structure of web
				content.
			</p>
		</div>
		<div class="card">
			<h1>CSS</h1>
			<p>
				Cascading Style Sheets is a style sheet 
				language used for specifying the presentation 
				and styling of a document written in a markup 
				language such as HTML or XML. CSS is a
				cornerstone technology of the World Wide Web, 
				alongside HTML and JavaScript.
			</p>
		</div>
		<div class="card">
			<h1>JavaScript</h1>
			<p>
				JavaScript, often abbreviated as JS, is a 
				programming language and core technology 
				of the World Wide Web, alongside HTML and 
				CSS. As of 2024, 98.9% of websites use 
				JavaScript on the client side for webpage 
				behavior, often incorporating third-party 
			libraries.
			</p>
		</div>
	</div>
</body>

</html>

CSS

.card-container {
    display: grid;
    grid-template-columns: 
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    border-radius: 5px;
    background: lightgreen;
    padding: 20px;
    box-sizing: border-box;
}

Output:

Create Responsive Column Cards with CSS

bishalpaul34

Improve

Article Tags :

How to Create Responsive Column Cards with CSS ?

Using Flexbox

Using CSS Grid

Similar Reads

Thank You!

What kind of Experience do you want to share?