Previously we have created a responsive general application layout and navigation using TailwindCSS.

Now, let's look at a few most common ways of placing content on a page:

1) Responsive column count using GRID
💻💻 big:
📜📜📜
💻 medium:
📜📜
📜
📱 small:
📜
📜
📜

2) center content on a page using AUTO MARGINS
💻💻 big:
↔📜↔
📱 small:
📜

3) 2 columns on big screen, one column on small screen using FLEX
💻💻 big:
📜📜
📱 small:
📜
📜

Episode source code: https://github.com/corsego/138-tailwind-layout/commit/270e25ba1e489b9cf2c100e76f008504394b9fef
Based on this blogpost: https://blog.corsego.com/tailwindcss-content-grid-flex

0:00 What we built before
0:42 Content page examples
2:20 Content Grid Columns
6:00 Content Centered
7:57 2-column Flex layout responsive width
12:48 2-column Flex layout fixed width
14:44 Summary