Thread by @Insharamin

9 Awesome CSS layout generators for beginners.
(Grid and Flexbox)

A Thread 👇

Grid-Based Layout Generator

1️⃣ Layoutit

LayoutIt is an interface builder for CSS Grid and Bootstrap. You can quickly design web layouts, and get HTML and CSS code. 📎layoutit.com

2️⃣ Griddy

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

With this web app, you can add new items into the grid, remove other items, and resize them to fit any layout you want. 📎griddy.io

3️⃣ GridCSS

Use the Generator to create a Responsive website your way
Select the number of columns you want in a row and set the margin you want to use.
Automatic maths will show you magic. 📎gridcss.com

4️⃣ CSS Portal

CSSPortal is home to a large range of CSS generators, tools, and resources. 📎cssportal.com

Flexbox based Layout Generator

5️⃣ Loading.io

With loading.io you can create your layout with ease and visually learn about flexbox while doing it. Basically a flexbox playground for on-demand CSS generation. 📎loading.io/flexbox/

6️⃣ Build with Flexbox

Flexbox is a layout system optimized for building user interfaces. Use this interactive reference tool to recall flexbox properties and experiment with layouts. 📎 flexbox.buildwithreact.com

7️⃣ My CSS Builder

MyCSSBuilder is a one-stop-shop for developers, allowing you to quickly and efficiently generate CSS for your websites. 📎 mycssbuilder.com

8️⃣ CSS Layout.io

Here you can find popular Layouts & patterns made with CSS. 📎csslayout.io

9️⃣ CSS Grid Template ( Quackit)

CSS grid layout allows you to create website layouts easily, by using a kind of "ASCII art" syntax. 📎 quackit.com/html/templates…

That's all for this thread. If you fount it useful, consider retweeting the first one. It would mean a lot! 😊