![Cover image for [css] Responsive cards](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl3axit8yioly582o78ay.gif)
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
}
Top comments (4)
CSS Grid and Flexbox make our lives so much easier.
how to port this to java, i need it for kitchen display system
I don't know much about java ui applications, but if it can't use HTML CSS then this is completely useless code.
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