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" id="1"></div>
         <div class="item" id="2"></div>
         <div class="item" id="3"></div>
         <div class="item" id="4"></div>
​
      </div>
   </section>
</article>
</body>
</html>
 
.conteneur {
 display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}
​
.item:nth-child(1){
  grid-column: 1; grid-row: 2; align-self: end;
}
​
.item:nth-child(2){
  grid-column: 1; grid-row: 1; z-index: 2;
}
.item:nth-child(3){
  width:50vh;
  height:50vh;
  grid-column: 1 / span 2; grid-row: 1 / span 2;
     z-index: 5; justify-self: center; align-self: center;
}
​
.item:nth-child(4){
  grid-column: 2; grid-row: 2; justify-self: end; align-self: start;
}
​
​
.item:hover:after{
  content : " < proportion de " attr(id);
}
​
.item:hover{
  z-index: 20;
}
​
#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: 1px 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.background = "#"+Math.random().toString(16).slice(2, 8);});
Output

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

Dismiss x