How to Create Responsive Column Cards with CSS ?
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;" > w3wiki </ 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;" > w3wiki </ 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 , 1 fr)); gap: 20px ; } .card { border-radius: 5px ; background : lightgreen; padding : 20px ; box-sizing: border-box; } |
Output: