Skip to content

Instantly share code, notes, and snippets.

@productioncoder productioncoder/Watch.js
Last active Feb 1, 2019

Embed
What would you like to do?
Watch component using Grid
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-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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.