How to use CSS Grid In CSS
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:
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