Grid generatorTailwind CSS
Note: Also check out my tutorial on Tailwind CSS Grid if you want to build a solid foundation in this topic.
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.
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.
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.