.u1-auto-grid - class

(deprecated) use grid.class instead

handy util-class to make a auto-column grid

• default gap (from classless.css variables)
• respecting available-space if item-(min)-width > available
• flexbox fallback

Ussage

<div class=u1-auto-grid>
    <div>item1<br>heigter</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
    <div>item5</div>
    <div>item6</div>
    <div>item7</div>
</div>

.u1-auto-grid {
    --u1-Gap:2rem;
    --u1-Col-gap:1rem;
    --u1-Items-width:8rem;
}
.u1-auto-grid > * {
    border:1px solid black;
    padding:.5em;
}

Install

<link href="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/auto-grid.min.css" rel=stylesheet>

Demos

minimal.html
test.html

About

• MIT License, Copyright (c) 2022 (like all repositories in this organization)
  
• Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥