Watch component using Grid

Watch.js

import React from 'react';
import './Watch.scss';
import {RelatedVideos} from '../../components/RelatedVideos/RelatedVideos';
import {Video} from '../../components/Video/Video';

export class Watch extends React.Component {
  render() {
    return (
      <div className='watch-grid'>
        <Video className='video' id='-7fuHEEmEjs' />
        <div className='metadata' style={{width: '100%', height: '100px', background: '#F91112'}}>Metadata</div>
        <div className='video-info-box' style={{width: '100%', height: '100px', background: '#BD10E0'}}>Video Info box</div>
        <div className='comments' style={{width: '100%', height: '100px', background: '#9013FE'}}>comments</div>
        <RelatedVideos className='relatedVideos'/>
      </div>
    );
  }
}

Watch.scss

.watch-grid {
  display: grid;
  grid-template: auto auto auto 1fr / auto 402px;

  .video {
    grid-column: 1 / 2;
    grid-row: 1 / 2
  }
  .metadata {
    grid-column: 1 / 2;
    grid-row: 2 / 3
  }
  .video-info-box {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .comments {
    grid-column: 1 / 2;
    grid-row: 4 / 5
  }
  .related-videos {
    grid-column: 2 / 3;
    grid-row: 1 / span 4;
  }
}