feather

Featherweb Blog

Blog index
fruit-grid

unpretentious ungrid

I wrote about Flexbox and Grid before. Those are two examples of responsive CSS systems that are both powerful and relatively easy to learn. I also mentioned that personally I wasn't sure I needed them. For I feel quite happy with my "boring?" vertical-only style. There have been moments that I wished I had a more flexible, tabular system, but I never bothered to add such, preferring to keep it simple...

Until now that is...Here comes ungrid, a CSS system written in just three lines! Its developer, Chris Nager, calls it "the simplest responsive css grid"

ungrid is a responsive, table-based CSS grid system. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced. This allows you to roll your own simple grids.

ungrid.css (97 bytes minified):

@media (min-width: 30em) { .row { width: 100%; display: table; table-layout: fixed; } .col { display: table-cell; } }

It is also possible to give the .cols a chosen width, either in percentage or in pixels (or em or rem). This opens a lot of new possibilities. As an example, this was my first 'exercise': here we have 4 columns. I gave the last 3 ones a width of 20% each. The first column then automatically uses the remaining (40%) width.

<div class="row"> <div class="col" style="width: %"><strong>Any editor</strong> </div> <div class="col" style="width: 20%"><strong>N</strong></div> <div class="col" style="width: 20%"><strong>Y(+-)</strong> </div> <div class="col" style="width: 20%"><strong>Y</strong> </div>

That is part of my first and not so useful ungrid attempt:

?
Emmet
Markdown
Olla

Any editor
N
Y(+-)
Y

Needs marking up
N
Y
N

One clear language
Y
N
Y

Well known/widespread
Y/N
Y
N(new)

Easy to learn
Y(+/-)
Y
Y

Open Source
Y
Y(not all)
Y

Needs duplicate files
N
Y
N

Auto-wrap around selection
Y(some)
Y(some)
N

some more examples:

Five columns

Five columns with gutters

Four gutterless columns...with .."gutters"

Seven columns

Two columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat commodo sed egestas egestas fringilla phasellus faucibus. Posuere morbi leo urna molestie at. Elementum nisi quis eleifend quam adipiscing vitae proin. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper.

Nunc mattis enim ut tellus elementum sagittis vitae et leo. Aliquam sem et tortor consequat id porta nibh venenatis cras. Ornare aenean euismod elementum nisi. Auctor neque vitae tempus quam pellentesque. Pellentesque dignissim enim sit amet venenatis. Nullam ac tortor vitae purus faucibus ornare suspendisse. Id semper risus in hendrerit.

Two columns with gutter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat commodo sed egestas egestas fringilla phasellus faucibus. Posuere morbi leo urna molestie at. Elementum nisi quis eleifend quam adipiscing vitae proin. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper.

Nunc mattis enim ut tellus elementum sagittis vitae et leo. Aliquam sem et tortor consequat id porta nibh venenatis cras. Ornare aenean euismod elementum nisi. Auctor neque vitae tempus quam pellentesque. Pellentesque dignissim enim sit amet venenatis. Nullam ac tortor vitae purus faucibus ornare suspendisse. Id semper risus in hendrerit.

***

I hope this short introduction is enough of a teaser to persuade you to try ungrid yourself! It is quite astonishing what this little bit of code can do. As Chris Nager says it is meant to enable you to roll your own simple grids. Flexbox, and certainly Grid, will be able to do much more, but at the cost of many more bytes and much more study. My feeling is Flexbox and Grid will be more satisfying for web designers, while ungrid is better suited for content producers, who sometimes need a little more than the bare minimum of CSS and responsiveness.

I have now added the ungrid.css to both feather.css and blogstyle.css. You can download those on the My Style page.

🔼