mourner/dead-simple-grid

Dead Simple Grid is a responsive CSS grid micro framework that is just that. Dead simple.

Hi! I'm Volodymyr Agafonkin.

I'm a software engineer. I created Leaflet, the number one library for interactive web maps, and maintain 40+ other open source projects with a focus on algorithms, computational geometry and data visualization. I'm building the future of maps at Mapbox. Here are a few of my best tech articles: https://agafonkin.com

I'm a musician. I write songs, play guitar and sing in Obiymy Doschu. If you like beautiful, evocative rock music with lush string arrangements, check out our last album.

I'm a father to beautiful 9-year-old twin girls, I'm happily married and live in Kyiv, Ukraine. I love baking, photography, strength training, martial arts, reading sci-fi and fantasy, and exploring quiet parks. You can find tidbits of my life on X (Twitter), Instagram and Facebook.

dead-simple-grid's Issues

.row.col .row.col

In your example, you use elements with class .row.col, which provides a shorthand to avoid doubling up on simple row/col elements. However, if you nest a .row.col inside of another row and column grid, the guttering fails.

Transform grid for using with inline-blocks

Привет! Хотелось бы также иметь инлайн-блоковую сетку работающую с этой же разметкой.

double .row

Hi

In line https://github.com/mourner/dead-simple-grid/blob/gh-pages/css/grid.css#L3

why does .row appears twice ?

thx!

Please consider creating an npm package for this.

Centered, fixed width?

What changes are needed to make this grid work for a centered, fixed width layout and still be responsive, mobile-first?

.row:after?

Your grid.css has a selector .row:after. Now, I am no css expert, but I looked up all the docs I could and all I could find pointed to .row::after being the correct syntax (a double colon, not single). What's more, I tried to follow the guidance in your README.md, and nothing of it worked (in a current Chrome), until I changed that colon to a double-colon.
Now, for some reason, your demo on githib pages does work as-is. In the same browser. Go figure.

Not an issue, more of a question.

I am extremely impressed with what you have accomplished in such a small amount of code and have one question. You use em for sizing in the media queries etc. Is there a specific reason for em versus rem? Thank you for sharing this amazing bit of code.