DEV Community

Cover image for [css] Responsive cards
Krisztián Maurer
Krisztián Maurer

Posted on • Edited on

7 3

[css] Responsive cards

It often happens that a set of cards needs to be made responsive, here is a simple solution:

https://codepen.io/maurerkrisztian/pen/dymeBmr


<div class="container">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode
:root {
  --min-width: 300px;
  --space-between: 2rem;
}

.container {
  display: grid;
  grid-gap: var(--space-between);
  grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));
}

.element {
  display: grid;
  place-items: center;
  background: lightpink;
  height: 100px
} 
Enter fullscreen mode Exit fullscreen mode

Maurer Krisztián demo

Top comments (4)

Collapse
 
andrewbaisden profile image
Andrew Baisden

CSS Grid and Flexbox make our lives so much easier.

Collapse
 
medsaid2001 profile image
medsaid2001

how to port this to java, i need it for kitchen display system

Collapse
 
maurerkrisztian profile image
Krisztián Maurer

I don't know much about java ui applications, but if it can't use HTML CSS then this is completely useless code.

Collapse
 
medsaid2001 profile image
medsaid2001

i can use css only in a webview but what would be useless what i want is the calculation of the width and height so I can simulate it

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay