#141 Responsive Content layout: Grid, Flex, Centered

13/08/2023
css tailwindcss

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