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:19 So, 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 to its normal position.

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

00:00:37 There's also a fixed position, which sticks the element to the viewport, 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,

00:00:57 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 Display Block, which simply takes up the full width.

00:01:22 There's Display Inline, 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.

00:01:34 And the second one is Display Grid, which enables the CSS grid properties.

00:01:38 So let's start by exploring Flexbox 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'll 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 of 16 for the width, rounded-full to make it into a circle, and a BG of blue 500. Now I'll 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, and let's change the colors.

00:02:35 Let's go with blue, orange, and green.

00:02:40 There we go.

00:02:41 Oh, and 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 different divs 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 want to 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 can center them, end them, start them, stretch them.

00:03:28 You can do whatever you want with it.

00:03:30 For now, I can just put justify center, item center as well, and give it a space Y of 6 instead of X of 6. And now we have three vertical circles.

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

00:03:41 They could be divs, they could be 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 rectangle.

00:04:03 This button?

00:04:04 Well, 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 Flexbox Froggy that helps you learn Flexbox.

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 And trust me, the levels get much more difficult, so you'll have to 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 a gap of two in between the elements.

00:05:11 We can also give it a margin top of two to divide it from the top, and a margin X of two to divide it from the 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 fill 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:36 You can change it to something like 5. 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 can move different things around to grow your garden.

00:06:03 So with that in mind, you now know the basics of how we can position your elements within 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.