Trouble with custom CSS layout

Question

I'm writing a template for a project and i'm stuck with a problem. I want to get a template like this:

Each rectangle should be 16/9. There is a main rectangle in the upper left and the other smaller around. All must be responsive and possibly I would not use any framework (Also I would like to be compatible with IE9+). That is what I managed to do so far (there is a link to Codepen):

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}
/* Grid */

.grid {
  display: block;
  background: black;
}
/* Clearfix */

.grid:before,
.grid:after {
  content: "";
  display: table;
  line-height: 0;
}

.grid:after {
  clear: both;
}
/* Unit */

.unit {
  width: 100%;
  float: left;
}
/* Dimensions */

.whole {
  width: 100%;
}

.half {
  width: 50%;
}

.two-thirds {
  width: 66.6665%;
}

.one-third {
  width: 33.3332%;
}

.one-quarter {
  width: 25%;
}

.three-quarters {
  width: 75%;
}
/* Gutters */

.unit {
  padding: 2.5px;
}

.no-gutters {
  padding: 0;
}

.no-left-gutters {
  padding-left: 0;
}

.no-right-gutters {
  padding-right: 0;
}
/* Content */

.content {
  position: relative;
  background-color: gray;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 */
}

.content div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* Responsive Stuff */

@media screen and (max-width: 500px) {
  .unit {
    width: auto;
    float: none;
  }
}
/* Specific CSS */

.container {
  position: relative;
}

.containers > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.player {
  background-color: red;
}

    <div class="grid container">
  <div class="unit three-quarters no-right-gutters">
    <div class="unit whole">
      <div class="content player">
        <div>Player</div>
      </div>
    </div>
    <div class="grid">
      <div class="unit one-third">
        <div class="content">
          <div>Thumb</div>
        </div>
      </div>
      <div class="unit one-third">
        <div class="content">
          <div>Thumb</div>
        </div>
      </div>
      <div class="unit one-third">
        <div class="content">
          <div>Thumb</div>
        </div>
      </div>
    </div>
  </div>
  <div class="unit one-quarter no-left-gutters">
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
    <div class="unit whole">
      <div class="content">
        <div>Thumb</div>
      </div>
    </div>
  </div>
</div>

What am I doing wrong? Is my approach wrong?

EDIT: Solved http://codepen.io/Mulder90/pen/KVKMKO :)

One thing that your question doesn't account for is different aspect ratios. If all of your rectangles are 16/9 then this assumes the monitor is 16/9, but not all monitors are 16/9. Do you have a plan for that? — Comptonburger, Dec 04 '15 at 00:13
If there are already frameworks out there that do this for you (which there are), why on earth would you not use them? If you want to go out of your way to re invent the wheel I hope you have a really good reason. — takendarkk, Dec 04 '15 at 00:19
http://stackoverflow.com/questions/1495407/how-to-maintain-the-aspect-ratio-of-a-div-using-only-css Simple as that. — TheLexoPlexx, Dec 04 '15 at 07:49
I have often encountered this "Why re-invent the wheel?" perspective amongst coders. (I do not consider myself a coder). It perplexes me. Surely the best reason to re-invent the wheel is because you are competent and quick and you know can build your own solution, leaner and more efficient than any solution built on a 3rd-party framework? Surely the best reason to spend time trying to re-invent the wheel is because you want to make mistakes and learn from them so you _can_ be that competent and that quick? — Rounin, Dec 04 '15 at 18:50
Sometimes 50-100k for a full library are a lot and in this case with 100 lines of css I solved my problem ;) — Lorenzo Cinque, Dec 05 '15 at 10:38

Rounin · Answer 1 · 2015-12-04T18:32:17.703

Here is an alternative approach, (which you can test by changing the dimension of the browser window):

function resizeGrid() {

var grid = document.getElementsByClassName('grid')[0];
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;

if (window.innerHeight < window.innerWidth) {
gridHeight = window.innerHeight;
grid.style.height = gridHeight + 'px';
gridWidth = ((gridHeight / 3) * 4);
grid.style.width = gridWidth + 'px';
}

if (window.innerWidth < window.innerHeight) {
gridWidth = window.innerWidth;
grid.style.width = gridWidth + 'px';
gridHeight = ((gridWidth / 4) * 3);
grid.style.height = gridHeight + 'px';
}

}

window.addEventListener('load',resizeGrid,false);
window.addEventListener('resize',resizeGrid,false);

body, .grid {
background-color: rgb(0,0,0);
}

.grid {
position: absolute;
top: 0;
}

.unit {
float: left;
border: 2px solid rgb(0,0,0);
box-sizing: border-box;
}

.one-quarter {
width: 25%;
height: 25%;
background-color: rgb(127,127,127);
}

.three-quarters {
width: 75%;
height: 75%;
background-color: rgb(255,0,0);
}

.grid, .content, .content > div {
width: 100%;
height: 100%;
}

<div class="grid">

<div class="unit three-quarters">
<div class="content player">
<div>Player</div>
</div>
</div>


<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

<div class="unit one-quarter">
<div class="content">
<div>Thumb</div>
</div>
</div>

</div>

The `.grid` dimensions in my original post above kept on freezing. I've updated the Javascript now and the script is working much more like how I originally envisioned it. — Rounin, Dec 04 '15 at 18:40

Trouble with custom CSS layout

1 Answers1