Tailwind on Rails #141 Responsive Content layout: Grid, Flex, Centered

13/08/2023 (8 months ago)
ยท
tailwindcss css

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
Sign in to join the conversation