Build Youtube in React 14: Laying out Youtube Watch component
Now that we have our
Video component and our
RelatedVideos component in place, we can start thinking about the overall look of the
Below you will find the components marked with different colors. Click on the image to see it in high resolution.
Watch component’s layout, we’re going to use
CSS Grid. Therefore, let’s abstract the image above a little bit.
2 Watch component layout
HeaderNav is already provided by
AppLayout, so we don’t have to take care of that.
It is clear, that we will have a grid with two columns. The column on the right will be pretty much occupied by our
Therefore the remaining components have to be placed in the first column.
At first we will put in the
Video component. After that we’ll display the typical
Youtube info box and the video’s metadata (e.g. views, channel name).
We will place a component that displays the video’s comments with infinite scroll below our video info box. We will build this later on as well.
Since we currently have our
Video and our
RelatedVideos component, let’s put them in first. We will also add some placeholders for the components that will follow.
2.1 Building Watch component with CSS grid
CSS-Grid, things can get quite easy.
Note that we added placeholder
divs with a fixed
height for the video metadata, the video info box and the comments component. We used inline
CSS styles here because we will replace the
divs with the actual components later on.
You probably already saw that
CSS-Grid sort of messes with the text in our
video info box placeholder div and adds a line break. But that’s all right. We will remove it later on anyway.
Our parent element is a
div with the class
.watch-grid. We make this class a
Grid container and state that there will be
4 rows and two columns. So we’re basically creating a
4x2 grid. Since we don’t want to be specific about the height of our rows, we say that
Grid should figure out the rows’ heights on its own. That’s why we specify
auto three times in
The fourth column is special. We set its height to
1fr. Since this is the only element that uses the
fr unit, this means that it will take all the available whitespace. This makes sense because our comments component will support infinite scroll and display a potentially very large amount of comments.
We know that the related videos component should be
402px wide. At least that’s the width in the original
Youtube application. Therefore, we make the constraint that the right column must have a width of
402px and that the left column should be sized automatically.
2.2. Positioning components with CSS Grid
We assign different classes to our components to place them correctly in the grid. Our video will be in the top left cell. Therefore we put it in the first column (i.e. between the first and the second vertical grid line) by setting
grid-column: 1 / 2. Our video will also be in the grid’s first row which is why we specify
grid-row: 1 / 2.
The metadata should be placed directly underneath our video. We put it into the second row by setting
grid-row: 2 / 3. This places the component between the second and the third horizontal grid line. Note that currently our grid does not have any visible borders. The
video info box is placed in the third row.
Comments go into the fourth row.
The only thing that’s worth mentioning with
.related-videos is that we place it in the second column. Hence, we specify grid-column
2 / 3. We want our related videos to
span all the available rows. Since it is placed in the second column, it won’t interfere with the rest anyway. Therefore we say that it should span over four grid tracks, i.e. over all the rows we have.
2.3 Intermediate result
The overall layout seems to be fine. However, everything looks a little bit crammed in. We need more whitespace.
We just add a
padding on the left, right and top. We also specify a
24px. This means that the gap between all columns will be
24px is not a magic number I came up with. It’s also the spacing the original
Youtube app uses.
In addition, we also make use of the
grid-row-gap property so that our grid rows have enough air to breathe.
Click on the image to see it in high resolution.
We did not add some tests for our
Watch component yet. Since it doesn’t accept props or reaches out to an API, we can only test whether it renders.
4 Wrap Up
We’re getting there. Our
Watch component gets better and better. Nice 😁.
As always, you can find this project’s code on our Github repository.Follow @productioncoder
Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.
If you are interested in more high-quality production-ready content, please enter your email below.