Grid Component

[anandology]

CSS Grids makes it very easy to make grids. It is much simpler than using bootstrap like columns and is responsive without having to use media queries.

Proposed API

grid = Grid(columns=3, gap="10px")
for i in range(10):
    grid << i

All the css properties of the grid can be set using the .css method. This is advanced usage and once we figure out the common patterns, we'll expose them as regular api.

grid = Grid()
for i in range(10):
    grid << "Lorem ipsum dolor sit amet, consectetur adipiscing elit"

grid.css("template-template-columns", "repeat(auto-fit, minmax(300px, 1fr))")

References

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
• https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe

[anandology]

I think css hack that I showed in the last example, could be abstracted as follows:

grid = Grid(gap="10px").autofit(min_width="300px")
for i in range(10):
    grid << i