6 CSS layout generators to use online

1. Layoutit

Link: https://grid.layoutit.com/

Design Web layout quickly and get HTML and CSS code. Use this interactive CSS grid generator to intuitively learn CSS grids and build web layouts

This is a simple layout created using code generated from this site and adding some custom CSS

2. csslayout

Link: https://csslayout.io/

Popular layouts and patterns made with CSS. Zero dependence. There is no frame. No CSS hackers. Real use cases. Good practice. You can choose a mode, it contains all the code related to the mode, we can copy and paste it into our project

This is the most common simple layout used on the website

3. griddy

Link: https://griddy.io/

Easily create CSS grid layouts by setting the number of columns and rows using various units. We can also set the column and row spacing, and view the generated code at the bottom, we can copy and paste it into our project. It does not support adding grid-template-areas or grid-area like Layoutit site, but it is still a very useful tool

This is a simple layout created using CSS code generated from this site, with some custom CSS added

4. Masaya Kazama

Link: https://vue-grid-generator.netlify.app/

This layout generator has two great presets: Holy Grail& Article List, we can make visual modifications according to our requirements, and all HTML and CSS codes are generated for us. It also supports grid area, which is very cool

This is a simple demo using the code of this site

5. CSS Grid Generator

Link: https://cssgrid-generator.netlify.app/

A gadget for everyone. You can specify rows, columns, gaps, and units, and then drag to create sub divs to easily create dynamic layouts!

This is a simple demo using the code of this site

6. Bootstrap 4 Interface Builder

Link: https://www.layoutit.com/build

Another great website of LayoutIt helps us quickly drag and drop the Bootstrap 4 grid system, basic CSS elements, components, etc., and use this interactive Bootstrap 4 interface generator to build a web layout