mediaPlayer gridView FlexBox

mediaPlayer gridView FlexBox

by ndw5015

HTML

<div class="media-player">
  <div class="grid-viewer">
    <div class="navigation-list grid">
      <div class="heading-titlebar">
        <div class="heading">heading</div>
        <div class="control-group"> control group</div>
      </div>
      <div class="thumbnail-container">
        <div class="grid-thumbnail">
          <div class="content">
          </div>
        </div>

        <div class="grid-thumbnail">
          <div class="content">
          </div>
        </div>

        <div class="grid-thumbnail">
          <div class="content">
          </div>
        </div>

        <div class="grid-thumbnail">
          <div class="content">
          </div>
        </div>

        <div class="grid-thumbnail">
          <div class="content">
          </div>
        </div>
      </div>
    </div>


    <div class="grid-display">
      <!-- if: content.type == "Video" -->
      <div class="video-view">
        <div class="video-view top-toolbar">top toolbar</div>
        <div class="video-view display-panel"> display panel</div>
        <div class="video-view bottom-toolbar"> bottom toolbar</div>
      </div>
      <!-- end if -->
      <!-- if: content.type == "Image" -->
      <div class="image-view">
        <div class="image-view top-toolbar"> top toolbar</div>
        <div class="image-view display-panel"> display panel</div>
      </div>
      <!-- end if -->
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

/* .grid-viewer .grid .heading-titlebar{
  display:flex;
  flex-wrap: nowrap;
  margin-bottom:15px;
  
   background-color:green;
}
.grid-viewer .grid .heading-titlebar .heading{
  flex:1;
}
.grid-viewer .grid .heading-titlebar .control-group{
  flex:1;
} */

.grid .heading-titlebar {
  display: flex;
  flex-wrap: wrap;
  background-color: pink;
}

.grid .heading-titlebar .heading {
  flex: 1;
}

.grid .heading-titlebar .control-group {
  flex: 2;
}

.grid .thumbnail-container {
  display: flex;
  flex-wrap: wrap;
  background-color: pink;
}

.grid .thumbnail-container .grid-thumbnail {
  position: relative;
  flex-basis: calc(48% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
  background-color: blue;
}

.grid .thumbnail-container .grid-thumbnail::before {
  content: '';
  display: block;
  padding-top: 100%;
}