 In the last video, we did typographies and text with and design. So in today's video, we'll be taking a look at dividers and spacing. So what I did here was I cleared out everything from the last video and I replaced it with this Hello World paragraph and I went and gave this div a style of padding 100 pixels. And the reason I did that was just so that our content doesn't stick to the top left corner of our browser window. So let's take a look at how we can make those dividers now, shall we? I'm first going to make this paragraph longer and I'm going to clone it a few times so that we can have separation. So when I save this, you can see that this is how the paragraph looks like right now. So to add a divider, we'll just have to go and import that from and design. So import divider from and then we can add those here. So I'm going to paste it all between the paragraphs here and let's save this. It seems like everything's working and you can see on the right side that we have a very thin divider here. If you're coding this on your own computer, you'll be able to see that fine line there. If you look at how I implement my dividers here, you can just see that it's a self-closing tag and it doesn't have any props. So what we can do is we can make it, we can make a closing tag there and add some text in the middle of the divider. So that's a center title and then when I save this, you can see on the right side, we get a divider with a title in the center and design allows left and right titles as well. So we can do another divider here with a title, left title and when I hit save, it's just another center title and we can make it align to the left by going to our divider tag here and adding a product called orientation. Let's set this to left. When I save this, it's actually aligned on the left. And of course, you can do this to the right side as well. So let's do closing tag. Let's say right title and then I'm going to do orientation equals to right. And then that will be a right title as you can see on our right side of the screen here. There's one other prop that I want to show you that you can use in your divider. So now you can see that the dividers have titles as their texts, but what if I don't want titles? I just want plain old text. So what we can do is we can go to our divider tag here and add an attribute called plain. So I'm going to add that to the left title and the right title just so you can see it and I'm going to save and you can see that the titles become plain text. So far, you have only seen horizontal dividers and you can actually make vertical titles and let me just demonstrate that to you right now. I'm going to clear out all of these and we're going to use some anchor tags. So let's say I have a few anchor tags like this. This will be anchors and let me clone that a few times. If I save this, it's going to look like that. It's all stuck together. What if I wanted to have dividers in the middle of these anchor tags just so that they're not all stuck together like that? We can actually add dividers like this, divider, and we can give them a type of vertical. So let me save that and you can see that the anchors are no longer stuck together and they have a small, a very thin line in between them. So those lines are really thin. Let me see if I can show it to you if I zoom in. So you can see that there are actually lines there and let me reset this and this is how it would look like. So that's all for dividers in end design. Now let's move on and take a look at spacing in end design. So we can import space from end design and I'm actually going to override the divider with space and I'm going to show you how we can do this spacing with space from end design as well. This is how the anchors look like without spacing. I'm going to zoom in just a little so you can see better what's going on here. That looks really stuck together, right? And you can solve this by using the space component provided by end design. So I'm going to take that out and I'm going to put that down here. So I just wrapped these anchor tags in a space component and you can now see that the anchors are no longer stuck together. Now if you look at the anchors here, these are spaced out evenly, horizontally. What if we want to make these anchors stack up vertically? We can do that with our space component by giving in the prop of direction equals to vertical and I'm going to save that. And you can see that the anchors now become stacked vertically just by passing in direction equals to vertical. Now let's talk about how we can go about customizing the spacing, the amount of spacing between these anchors. I'm going to replace these two anchors with a card from end design just to demonstrate it a little better. So to do that, I have to import card from nd and if you don't know how to use the card component from nd, don't worry. I have videos on that in the playlist. For this video, you don't have to really know the syntax of how to use the card component. You just have to know that the card component is a component from nd that we can use. I'm going to save that and this is how the card looks like. And right now you can see that the card is pretty hard to see because it has a wide background and the border isn't too thick. So you can see I've added a style prop here that points to styles.card. And styles.card right now doesn't exist. So I'm going to create styles.card by pasting this here. So in my styles object, I have a card sub object that has some styles. So width of 200 pixels, the background color, the border color, and display type. I'm also going to come here and comment this anchor out. And then I'm going to clone the card multiple times here, 1, 2, 3, 4. So I'm going to save that and I can reset the zoom here so you can see how it looks like. So what I'm actually going to do now is get rid of the direction that goes to vertical prop. And when I save this, you can see that the cards will go beyond my screen. So I'm going to fix that by giving a new prop to the space component here. And that's called wrap. So if you put wrap here like this, and when you save it, it's going to wrap around the edges of the screen so that it won't overflow beyond the screen. And let's talk about the sizing of the space. So right now, I don't really like the sizing of this. I want the space to be more. So I can actually go and put size here equals to middle. For some reasons, it's called middle. If I were the lead developer at that design, I'd be calling this medium. So small, medium, and large, but they chose to go with the middle. So middle like this, then you can see that the spacing is now middle. I can set this to I think large. Is it large? Yes. So it's large. That it wraps over and it's going to overflow like that. I can resize the window and you can see that this is the large spacing. And the reason it's coming out to the next line here is because of this wrap attribute here. So let's change that. And we can, of course, go back to small. Then the spacing will refer to small. Now, there are some instances in which large isn't big enough and small isn't small enough. And if that's the case, you can actually change the size to contain some integers. So let's set this to 50 and this is larger than large. I can set this to 100 and it's going to be 100. I can even set it to 8000 and it's going to be 8000. I believe the unit to be in pixels. You know what? Let's change this to 20. All right. Next, let's talk about the alignment of all of these items in a space. So what I'm going to do right now is I'm going to get rid of one of the cards here and I'm going to resize this. So let me get rid of wrap and resize this so that I can see everything on one screen. OK. And I'm going to get rid of the paragraph here and I'm going to clone this one down. This is amazing. You know. OK. Let's save that. And now you can see that we have automatic alignment. So everything is aligned center. So if I do align equals a center, this is what it's doing right now. I can also change align equals to start. So if I save this, everything is going to be aligned on the top. So that is how it looks like. That's also end. So if you save align equals to end, it's going to be aligned from the bottom. And that's actually, I think it's going to look the same if I set align equals to baseline. And that's basically almost the same as align equals to end in our example. So let's change this back center. And so that's how you can align in end design. And the last thing that I want to show you in this video is how you can use the split property of the space component to combine spaces and dividers. So let's get all of the cards here. And let's use our anchor tags here. I'm going to create a few more. And so if you remember, the way we separate these anchor tags from getting stuck together is by using dividers. So we can do dividers, divider. And then we can do this for all of the lines here. We can copy and paste this divider here. And right now it's not going to work because I have not imported that here. So I've imported that. So divider. And then when I save this, you can see this is how it looks like. The divider actually looks really small. So I'm going to zoom in here. And the dividers aren't showing up. So I think what we have to do is go to dividers here. And let's add a type of vertical. So we get vertical dividers. When I save that, and sure enough, we see our vertical dividers there actually. I'm going to zoom this in so you can see that the dividers exist. So you can see that line there? That's the divider. And I'm going to zoom back out so it looks nicer. But the thing is there is a better way of doing this. Just let's say we have a ton of anchor tags here. And then what you have to do is go and copy this divider tags and put it everywhere between your anchor tags. And that's just not how we would write our code. So let's get rid of those dividers. And then the way we can automatically add dividers between these components, these children components inside the space component is by using the split property. So the split property takes in a react component. And we can paste our component right there. And when we hit save, you can see it still works the same. So when I refresh this, you can see that all of the anchor tags have a divider in between them. And it is automatically added in by the space component from end design because we've used the split property here. So I'm just going to resize this window here so you can see it better. And I'm going to zoom in just so you can see that the dividers actually exist in between the anchors even though I did not manually add dividers in between all of these anchors here on the left side. And that's it for this video. In the next video, we'll take a look at how end design's great system works.