Gridding around

by Alon Rotem

HTML

<div id="main">
  <div id="logo">
    LOGO
  </div>
<div id="share-options">
    <div>
      [cast]
    </div>
    <div>
    [share]
    </div>
</div>

  <div id="speed-controls">
    Speed controls
  </div>
  
  <div id="links">
    <div id="linkswrpper">
    <div>
      [booklet]
    </div>
    <div>
      [pdf]
    </div>
    <div>
      [QRs]
    </div>
    <div>
      [Fullscreen]
    </div>
    </div>
  </div>
  
  <div id="play-controls">
    <div id="controls">
      <span>|&lt;</span>
      <span>&gt;</span>
      <span>&gt;|</span>
    </div>
  </div>
  
  <div id="progress">
    <div id="progresscontainer">
      <div id="progresstimers">
        <span>00:00:00</span>
        <span>01:29:42</span>
      </div>
      <div id="progressbarcontaiener">
        <div id="progressbar"></div>
      </div>
    </div>
  </div>
</div>

CSS

#main
{
  width:832px;
  height: 468px;
  background-color: red;
  display: grid;
  grid-template-columns: 33% 34% 33%;
  grid-template-rows: 15% 18% 34% 18% 15%;
}
#main div
{
  display: flex;
  padding: 3px;
}

#logo
{
  background-color: purple;
  grid-column: 1/3;
  grid-row: 1/2;
  flex-direction: column;  
}
#logo img
{
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

#share-options
{
  background-color: orange;
  grid-column: 1/2;
  grid-row: 2/6;
  flex-direction: column; 
}
#speed-controls
{
  background-color: green;
  grid-column: 3/4;
  grid-row: 1/2;
  justify-content: end;
}

#links
{
  background-color: pink;
  grid-column: 3/4;
  grid-row: 2/5;
  flex-direction: column;
  align-items: end;
}
#linkswrpper
{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
 justify-content: space-between;
 height: 100%;
 width: 100%;
}

#play-controls
{
  grid-column: 2/3;
  grid-row: 3/4;
  justify-content: center; /*horizontal*/
  align-items: center; /*vertical*/
}
#controls
{
  background-color: gray;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;  
}
#controls span
{
  background-color: white;
}

#progress
{
  grid-column: 1/4;
  grid-row: 5/6;
  justify-content: center; /*horizontal*/
  align-items: center; /*vertical*/  
}

#progresscontainer
{
  height: 100%;
  width: 100%;
  display: grid !important;
  grid-template-columns:  5% 90% 5%;
  grid-template-rows: 50% 50%;
}
#progresstimers
{
  width: 100%;
  background-color: white;
  grid-column: 2/3;
  grid-row: 1/2;
  justify-content: space-between;
}
#progressbarcontaiener
{
    grid-column: 2/3;
    grid-row: 2/3;
}
#progressbar
{
  background-color: red;
  height: 3px;
  width: 100%;
}