Ingrid allows users to visually develop complex and flexible layouts. Similar to a spreadsheet program where you could select and colour cells in a table, Ingrid invites you to make a master grid and then populate it with child elements by selecting individual cells. When elements are added their grid coordinates are “recorded” at the current browser width like keyframes in an animation.

My aim was to build a tool which could generate a starting point when tackling a flexible, grid based layout. CSS grid allows complete freedom of movement for all child elements, and with those elements requiring an adaptive grid for varying screen sizes there’s scope for some incredibly complex and dynamic layouts.

I developed Ingrid entirely on Codepen before exporting, minifying and uploading to I used Sass out of habit but in all honesty there wasn’t much CSS heavy lifting required. I used Babel so that I could work with the latest and greatest JavaScript features, no additional JS libraries or frameworks were used.

Visit Website