# #141 Responsive Content layout: Grid, Flex, Centered

- URL: https://superails.com/posts/ruby-on-rails-141-responsive-content-layout-grid-flex-centered
- Published: 2023-08-13
- Duration: 15:00
- Access: free
- Topics: tailwindcss, css
- Playlists: Tailwind on Rails

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

## Chapters

- 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