Grid generatorTailwind CSS
Note: Also check out my tutorial on Tailwind CSS Grid if you want to build a solid foundation in this topic.
Settings
Columns number
Responsive templates
Hold and drag the bar on the right to resize the examples below and see how they behave at different screen widths.
2 unequal columns
Classic layout with one larger and one smaller column. On small screens, both columns will take up 100% of the width and will line up one after the other.
3 unequal columns
On large screens, this layout will display 3 columns - 2 small ones on the sides, and one large one in the middle. On small screens, they will all take up 100% and line up one below the other.
4 columns
This layout will display 4 small columns on large screens, and on medium screens it will change to 2 rows of 2 columns each. On small screens, each column will occupy 100% of the width and will be placed one below the other.
Tablet view
This layout normally displays 3 equal columns on large screens, and on small screens, each of them occupies 100% and lines up one below the other. The only difference is medium screens, i.e. the so-called tablet view, where one column takes up 100% of the width, and the other two are placed below it and each takes up 50% of the width.