Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>grid .item#it$*4</title>
</head>
<body>
<article id="testV1">
 
   <section id="result">
      <div class="conteneur">
         <div class="item"></div>
         <div class="item"></div>
         <div class="item"></div>
         <div class="item"></div>
         <div class="item"></div>
​
      </div>
   </section>
</article>
</body>
</html>
 
.conteneur {
  display : grid;
  grid-template-columns: 100px 1fr 5vw ;
  grid-template-rows: 50px 1fr;
  grid-gap : 2px;
​
​
}
​
.item:nth-child(1){
  
}
​
.item:nth-child(2){
  
}
​
.item:nth-child(3){
  
}
​
.item:nth-child(4){
  
}
​
​
#testV1{
​
}
​
body:after {
    content: "";
    position: absolute;
    z-index : -1; 
    top: 0px; right: 0; bottom: 0; left: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 1px),
                linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
    background-size: 10px 10px, 50px 50px, 10px 10px, 50px 50px;
}
​
​
body {
  padding:0;
  margin:0;
}
​
#testV1 #result .item {
  opacity : 0.7;
  padding : 5px;
}
​
#testV1 .conteneur {
  height: 400px;
  width: 400px;
  border : 1px solid black; 
  color : white;
  resize: both;
  overflow: hidden;
  position : absolute;
  top : 50px;
  left : 50px;
  font-size : 1em;
} 
​
​
 
function proportion(n) {
  return function(m) { return (m/n).toFixed(2); };
}
​
function tick() {
  let rapportBody = proportion(document.querySelector('#testV1 .conteneur').offsetWidth);
  let I = document.querySelectorAll('#testV1 .item')
  for (let i=0 ; i<I.length ; i++){
      I[i].textContent = `${I[i].offsetWidth}/${I[i].offsetHeight} \u2192${rapportBody(I[i].offsetWidth)}`;
  }
​
    window.requestAnimationFrame(tick);
}
​
window.requestAnimationFrame(tick);
​
​
Array.from(document.querySelectorAll('#testV1 .item'),el => {el.style.backgroundColor = "#"+Math.random().toString(16).slice(2, 8);});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x