Responsive Card Layout using CSS Columns

Developer
Jon Milner
Size
2,651 Kb
Views
16,192
  1. Responsive Card Layout using CSS Columns Previews
  2. Responsive Card Layout using CSS Columns HTML Codes
  3. Responsive Card Layout using CSS Columns CSS Codes

How do I make an responsive card layout using css columns?

What is a responsive card layout using css columns? How do you make a responsive card layout using css columns? This script and codes were developed by Jon Milner on 09 December 2022, Friday.

Responsive Card Layout using CSS Columns Previews
IQ Test

Responsive Card Layout using CSS Columns - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Card Layout using CSS Columns</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Small Card</h2>
<div class="card card--small"> <div class="list-item"> <div class="list-item__title">Card 1</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 2</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 3</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 4</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 5</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 6</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 7</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 8</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 9</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div>
</div>
<h2>Large Card</h2>
<div class="card card--large"> <div class="list-item"> <div class="list-item__title">Card 1</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 2</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 3</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 4</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 5</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 6</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 7</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 8</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div> <div class="list-item"> <div class="list-item__title">Card 9</div> <div class="list-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> </div>
</div>
</body>
</html>

Responsive Card Layout using CSS Columns - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 32px; padding: 2rem;
}
ul { margin: 0; padding: 0; list-style: none;
}
.card { padding: 16px; padding: 1rem; padding-bottom: 0; background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px;
}
.card:not(:last-child) { margin-bottom: 32px; margin-bottom: 2rem;
}
.card--small { width: 300px; height: 300px; overflow: auto;
}
.card--large { max-width: 1200px;
}
@media screen and (min-width: 600px) { .card--large { -webkit-columns: 2; -moz-columns: 2; columns: 2; }
}
@media screen and (min-width: 900px) { .card--large { -webkit-columns: 3; -moz-columns: 3; columns: 3; }
}
.list-item { display: inline-block; margin-bottom: 16px; margin-bottom: 1rem; padding: 16px; padding: 1rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px;
}
.list-item__title { margin-bottom: 8px; margin-bottom: 0.5rem; font-weight: bold;
}
.list-item__description { font-size: 12px; font-size: 0.8rem; color: rgba(0, 0, 0, 0.5);
}
Responsive Card Layout using CSS Columns - Script Codes
Responsive Card Layout using CSS Columns - Script Codes
Home Page Home
Developer Jon Milner
Username jonmilner
Uploaded December 09, 2022
Rating 3
Size 2,651 Kb
Views 16,192
Do you need developer help for Responsive Card Layout using CSS Columns?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jon Milner (jonmilner) Script Codes
Name
Playing Around with AMCSS
Cisco Logo Loading Animation
Chomp Chomp
Simple CSS Radial Progress Bar
Social Icons with Tooltip
Custom Form Styles
Kirby in CSS
Responsive Hexagon Layout using Sass Mixin
Playing Around with BEM
Kitty Blocks
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!