DEV Community 👩‍💻👨‍💻

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

Posted on • Updated on

[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
Maurer Krisztián Author

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

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.