Build Youtube in React 08: Home Feed and Video Grid
1 Youtube Home Feed video grid
In the last tutorial, we started building out Home
feed components. Let’s look at our mockup again.
Click on the image to see it in high resolution.

As of now, we have a component which can show video video preview elements.
Click on the image to see it in high resolution.

2 Introducing VideoGrid component
Youtube shows suggestions for interesting topics grouped by a certain topic. The videos are shown in a grid. Typically we have 12
videos per topic or category. Let’s create a component that creates a proper grid view of the available videos.
Because the VideoGrid
component will only be responsible for lay-outing VideoPreview
components properly, it will probably not be connected to our Redux
state later on. Therefore, we consider it a presentational component and will put it into src/components
.
2.1. Creating VideoGrid component files
- Create a directory called
VideoGrid
insidesrc/components
- Create a
VideoGrid.js
andVideoGrid.scss
file inside the directory you have just created
2.2. Design VideoGrid component.
That’s any easy one. This component will show a list of available videos grouped by a specific topic (e.g. entertainment, cars). For each topic, 12
VideoPreview
components are displayed. Since we haven’t connected our app to the Youtube API backend, we will show some placeholder VideoPreview
elements. Later on we will of course generate them using loops and real data. Therefore, the current markup could look a little bit weird 😁.
Our CSS is pretty straight forward. The .video-grid
element is a flex container
hat aligns its elements horizontally. We’ve added flex-wrap: wrap
so that in case there is not enough room, the VideoPreview
elements will wrap to the next line. Without specifying this property, flexbox
would try to cram all VideoPreview
elements into one single row.
We also want our grid to add some spacing between the VideoPreview
items. That’s why we give every direct descendant of the .video-grid
element, i.e. every VideoPreview
a margin on the left and a margin at the bottom.
One row in a video grid should hold at most six VideoPreview
elements. We’re going to enforce that in our Home
component in the next section. The VideoGrid
element should not have any max widths so that it remains flexible
2.3 Updating Home component
To see what we have achieved so far, we should update our Home
component and make use of our VideoGrid
components.
Update your src/containers/Home/Home.js
to
Wow, wait what are these CSS
classes? Since we want our Home feed to look similar to Youtube’s we must centre our video grids horizontally. Therefore, we need a little bit of CSS tweaking.
We’re making use of one of the most modern CSS modules: CSS Grid
(or Grid in short). If you are not familiar with CSS grid, I highly recommend you read a little bit about it here.
It’s basically Flexbox
just for two dimensions. Flexbox
and CSS Grid
actually work really well together.
2.4 Updating Home component styling
Grid will save you so much time and effort once you have picked it up. I promise.
What are we doing here? We are making our .home
element a grid container by setting display: grid
. We only want to have one row and one column because Grid
makes it easy to horizontally center our elements. Therefore, we’re telling Grid
we want one column and one row and it should figure out their widths on its own by setting grid: auto / auto
.
We also force our grid to horizontally centre its children by setting justify-content: center
. And then we insert the only child of our grid with a class of .responsive-video-grid-container
. This element is responsible for capping the maximum size of our VideoGrid
elements. Our VideoGrid
element will try to place all VideoPreview
items in one row unless there is not enough space. If there’s not enough space, it will wrap. However, we want our VideoPreview
items to be nicely centred. Therefore we limit the width of our VideoGrid
elements by using media queries.
Try it on your own. The maximum amount of VideoPreview
items should in one row is six. If you make make your browser window smaller you will notice that suddenly, you only see five elements in one row. We do this so our Home
feed still looks nice on smaller screens.
And this is what we get.
Click on the image to see it in high resolution.

Looks ok, but the spacing is not quite right. Let’s fix that.
2.5 Adding VideoGridHeader element
If you have a closer look at each video section heading, you’ll notice that there are some spacing issues. Since we might want to add more content to our heading later on, let’s just put it into a simple component.
- Create a new directory inside the
VideoGrid
directory and call itVideoGridHeader
- Create a
VideoGridHeader.js
and aVideoGridHeader.scss
file in the directory you just created
As you can see, it’s just a little bit of cosmetics.
Let’s also update our VideoGrid
component. Just replace the <h4>
tag with our new VideoGridHeader
component like so:
This looks much better. But there’s one more thing with the video grid dividers
2.6 Make video grid dividers removable
Now you may have noticed that we get a grey divider line at the bottom of our video grids. While this is useful to better group videos of the same categories, it doesn’t really make sense for the last VideoGrid
element that is rendered. Therefore, let’s fix this:
We just introduce a hideDivider
prop that can be used to hide the grey divider line at the end of each video grid.
Finally, we also have to update our home component.
3 Adding tests
The only thing that’s missing are a few test cases.
- Create a
__tests__
directory inside theVideoGrid
and insideVideoGridHeader
directory - Add a
VideoGrid.unit.test.js
file insideVideoGrid/__tests__
- Add a
VideoGridHeader.unit.test.js
file insideVideoGrid/VideoGridHeader/__tests__
To run the tests and to have a look at the snapshots, cd
into your project and run
4 Wrap Up
So here’s the result of our work. Currently we’ve just done the markup. Later on, we will fill the VideoGrid
component with life and display videos we fetched from the Youtube API.
Click on the image to see it in high resolution.

As always, you can find the full code in our Github repo.
Follow @productioncoderPlease 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.
Where are video-section-container avideo-section coming from?
Again, very good catch 👍. Thank you very much. I think I forgot to remove the classes while I refactored it. I typically write that stuff at night after work, so I oversee stuff from time to time. If in doubt, please check the repo on Github.
I believe Home.scss is missing margin-top: $header-nav-height; Without it, the first VideoGridHeader is not in the correct location.
You’re right. Thanks for letting me know. I updated it 👍