README.md

.u1-grid - class

Most wanted grid case

handy util-class to make a auto-column grid

• default gap (--u1-Gap)
• default item-width (--u1-Items-width)
• dynamic column-count
• respecting available-space if item-(min)-width > available

Usage

<div class=u1-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-grid {
    --u1-Gap:2rem;
    --u1-Col-gap:1rem;
    --u1-Items-width:8rem;
}
.u1-grid > * {
    border:1px solid black;
    padding:.5em;
}

Install

<link href="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/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. ♥