DEV Community

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

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
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