Layoutit! is an interactive CSS grid generator that allows you to create grids visually then move the CSS and HTML you’ve created to CodePen quickly and easily.


You can set an initial number of columns and/or rows using percentages, pixels, and other CSS measurements. Then click in a block, draw a section, drag and resize and hit save. You’ll immediately see the CSS and HTML you’ve generated on the right. Once you are ready to take you grid to the next level, create a CodePen directly from the right-hand panel. This is one of those tools that’s extremely helpful when doing web design work. Kudos to the Leniolabs team!

Also, check out their Bootstrap 4 Interface builder.