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

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

Comments

[medsaid2001]

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

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

[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

[Andrew Baisden]

CSS Grid and Flexbox make our lives so much easier.