00:00:02 Tailwind provides powerful utilities for structuring layouts with positioning, display properties, flexbox and grid.

00:00:10 So, let's go over them one by one.

00:00:12 Most of the time, you'll see yourself using display, position and maybe sometimes overflow CSS properties.

00:00:20 Let's first talk about positioning.

00:00:22 Positioning defines where an element appears relative to its container or the viewport.

00:00:28 There's a position of relative which moves the element relative its normal position.

00:00:33 Then there's absolute which move it to the nearest parent.

00:00:37 there is also a fixed position which sticks the elements to view port so it doesn't scroll.

00:00:42 as well as Position Sticky, which makes it behave normally until scrolled to a certain point.

00:00:48 For example, if you create a red 10 by 10 square and you give it a Top Zero property, it'll be fixed at the top of the page regardless of your scroll position.

00:00:59 Then, much more important than Position, there's Display and specifically Flexbox and Tailwind.

00:01:05 It determines how an element behaves in terms of layout and visibility within the document.

00:01:11 It's one of those must-have CSS skills for creating responsive layouts.

00:01:15 And the moment you master Flex, well, you can flex on everyone.

00:01:18 There's DisplayBlock, which simply takes up the full width.

00:01:22 there's displayInline,which behaves like text, Which means that it doesn't have any width or height.

00:01:27 and finally, there are two very powerful display properties.

00:01:30 The first one is Flex which enables Flexbox and the second one, is DisplayGrid which, enables the CSS grid properties So let's start by exploring Flexbox

00:01:41 in action.

00:01:41 I'll create a new div that has a class equal to flex which just enables FlexBox.

00:01:48 Then I will give it justify-end which will align the items within the container to the right.

00:01:54 And finally space-x-6 which will add some spacing in between the elements.

00:02:02 So let's add that inner element of div and we can also just immediately close it.

00:02:08 I'll give it a class equal to H of 16 for the height, W of16 for width, rounded-full to make it into a circle, and a BG of blue 500. Now I will duplicate

00:02:22 this div right below, two times.

00:02:27 And immediately you'll see three different circles.

00:02:29 Let's also apply a bit of a margin top of two to give them some space.

00:02:33 And let's change the colors.

00:02:35 Lets go with blue, orange, and green.

00:02:40 There we go.

00:02:41 Oh, it looks like I almost remade the letterbox logo.

00:02:44 That was fun.

00:02:45 But hey, just by putting these three devs right here, you can play with the flex layout.

00:02:50 Maybe change it from justify end to justify around, baseline, between, center, and evenly.

00:02:58 Whatever you want to do, you can totally do it and see it happening live right here.

00:03:02 But what if you wanna have a column-based layout where the elements are not one next to another, but rather one on top of the other?

00:03:10 Well, you can do that very easily by assigning it a flex-col property, which stands for column.

00:03:17 And of course, if you want to modify how the elements appear on a column, instead of using justify properties, You can use items-properties.

00:03:25 So you could center them, end them start them stretch them.

00:03:28 You could do whatever you wanted with it.

00:03:30 For now, I can just put justify center, item center as well, and give it space Y of 6 instead X of six.

00:03:37 and now we have three vertical circles.

00:03:40 Now, these circles could be anything.

00:03:41 They could divs, they could images.

00:03:44 You're free to move the content however you'd like across the screen, allowing you to create any kind of layout.

00:03:50 Even this tailwind screen that you're seeing right now is just a series of rectangles.

00:03:55 In CSS, everything is a rectangle.

00:03:58 See this part right here?

00:03:59 Well, it's a Rectangle.

00:04:01 This preview window?

00:04:02 Also a rectangular.

00:04:03 And this button?

00:04:05 I think you can guess it.

00:04:06 And that's exactly what makes Flexbox positioning super useful.

00:04:10 And if you want to practice some FlexBox or learn it for the first time, there's a game called Flex Box Froggy that helps you learn Flex box.

00:04:18 The goal of the game is simple.

00:04:20 You just have to move the frog from water to its pond.

00:04:23 So in this case, you need to apply a justify content of Flex End.

00:04:27 Trust me, the levels get much more difficult, so you'll have really practice it and know your way around it.

00:04:35 This is a property that we used not that long ago.

00:04:37 It's justify content space around.

00:04:40 Okay, it's good.

00:04:41 My CSS game is still on point.

00:04:44 Now let's practice some CSS grid within Tailwind.

00:04:48 Transforming this code to a CSS Grid is super simple.

00:04:51 Let's just remove the flex and flex call properties, as well as the item center and justify center.

00:04:57 Heck, we can remove everything.

00:04:59 and let's just apply a grid property, as well as grid-cols-3, which stands for three columns.

00:05:08 And we can also apply the gap of two in between the elements.

00:05:11 We can give it a margin top of 2 to divide it from the top, and a Margin X of 3 to divided from corners.

00:05:17 Now, what's cool about this grid is that if you don't provide it the width, it'll naturally expand to fill its space.

00:05:25 You can do similar things with Flexbox, but Grid makes it super simple to feel out the entire width or height of something.

00:05:31 So, in simple words, this code right here creates a three-column layout.

00:05:38 which will make it a five-column layout, giving us space for two more elements.

00:05:42 As with Flexbox, there's many other grid properties that you can use, from columns, rows, flows, and more, to truly master it.

00:05:50 And if you're new to CSS Grid, well, There's no frogs here, but a grid garden.

00:05:55 It works very similarly to FlexBox Froggy, But it doesn't have as good of a name.

00:06:00 Here, you could move different things around to grow your garden, So with that in mind, you now know the basics of how we can position your elements within

00:06:07 a layout using Grid and Flexbox in Tailwind CSS.

00:06:12 Of course, these are just native CSS properties, but TailWind makes it super simple to use them.