#141 Responsive Content layout: Grid, Flex, Centered
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
0
Destacado en listas
![#138 Responsive Layout with Sidebar and Navbar](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg5MCwicHVyIjoiYmxvYl9pZCJ9fQ==--20f38afc454180eb5a08327b9629d846e64c1849/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#139 Advanced Navbar Dropdown Menu](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkwMCwicHVyIjoiYmxvYl9pZCJ9fQ==--cd4b7cf897374899e30004392d15c095c38f9999/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#140 Click outside to close Menu with Stimulus-Use](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--7ca40fc28c88f131fd3eb23fbe0b8c8518c3c577/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
Stop copypasting CSS and Javascript UI elements!
Learn to write your own!
Really, there are like 50 classes that you need to remember and you're set for life!