koalaz koalaz - 2 months ago 9
CSS Question

Dynamic resizing of grid or table in CSS for 100% stretch screen placement

I have this code already. I'm trying to create a grid of rectangles that auto resize when the browser screen resizes or adjusts (bigger/smaller).
In my example, there are 9 rectangles occupying the grid. First, imagine the whole grid as a giant rectangle. I want this whole grid to fill the browser screen entirely with no padding. Then, each individual rectangle that make up the grid I want each to take up an equal amount of space inside the grid. So a rectangle in this scenario of 9X9, should take up 33.33% of the width and 33.33% of the height (that's 1/3). Each rectangle inside the grid should also have no padding or maybe 2px padding where they come into contact with another rectangle in the grid.

The issue I have so far in my code is that it's not filling in 100% in the height, there is padding of the whole grid between the browser window and the whole grid, and the content inside each rectangle goes outside of the rectangle. See the IMG picture how it floats over to the other rectangles.
I'd appreciate any help with these things. Thanks!

Also, I want minimum size to be 90px wide for each rectangle, so if you shrink window where each rectangle is smaller than 90px, the whole main browser window will scroll and the individual rectangle will stop shrinking dynamically.

<html>
<head><style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.grid {
background: white;
}
.grid:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}

[class*='col-'] {
float: left;
padding-right: 2px;
}
.grid [class*='col-']:last-of-type {
padding-right: 0;
}

.col-1-3 {
width: 33.33%;
height: 33.33%
}

.module {
padding: 2px;
background: #eee;
}

/* Opt-in outside padding */
body {
background: url(http://s.cdpn.io/3/dark_wall_@2X.png);
background-size: 300px 300px;
}

h1 {
color: white;
}
h1 em {
color: #666;
font-size: 16px;
}
</style>
</head>
<body>
<div class="grid">

<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 1.</p>
</div>
</div>


<div class="col-1-3">
<div class="module">
<img src="http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower-300x300.jpg">
</div>
</div>

<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 3</p>
</div>
</div>


<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 4.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 5.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 6.</p>
</div>
</div>

<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 7.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 8.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>2/3</h3>
<p>box 9.</p>
</div>
</div>







</div>
</body>
</html>

Answer

I think you want something like this.

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.grid {
  background: white;
  height: 100%;
}
.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}
[class*='col-'] {
  float: left;
  padding: 2px;
}
.grid [class*='col-']:last-of-type {} .col-1-3 {
  width: 33.3333%;
  height: 33.3333vh;
}
.module {
  background: #eee;
  height: 100%;
  padding: 2px;
}
.module img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
/* Opt-in outside padding */

body {
  padding: 2px;
  overflow: hidden;
}
<div class="grid">

  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 1.</p>
    </div>
  </div>


  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 2</p>
    </div>
  </div>

  <div class="col-1-3">
    <div class="module">

      <img src="http://lorempixel.com/400/200/sports/" alt="" />
    </div>
  </div>


  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 4.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 5.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 6.</p>
    </div>
  </div>

  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 7.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 8.</p>
    </div>
  </div>
  <div class="col-1-3">
    <div class="module">
      <h3>2/3</h3>
      <p>box 9.</p>
    </div>
  </div>


</div>

Codepen Demo

I have used overflow:hidden on the body (for now) and the issue of the 90x90 is merely a matter of media queries.

Comments