DEV Community

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

Posted on • Edited on

[css] Responsive cards

#css #webdev #tutorial

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