JSFiddle - React, Tailwind, and code Playground

by _xlf

HTML

<html dir="ltr" lang="en-us"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Demo | Jen Simmons Labs</title>
    <link rel="stylesheet" href="css/01-009.css">
  </head>
  <body class="F">

  <main>
<article><h3>
-1) This is NOT the original!
</h3><p>
This is just an experiment based on <a href="http://labs.jensimmons.com/2017/01-009.html">Jen Simmons' Teaser Card lab.</a>
</p></article>
<article><p>
  0) I was just experimenting whether one could create something looking like her example D, but with horizontal-first item placement. (and in grid).
</p><p>
However, I failed to do so without javascript.
</p><p>
By the way, as Firefox doesn't support <code>break-inside</code>, Jen Simmon's example D looks ugly there <em>unless</em> you add <code>display: inline-block;</code> on the <code>&lt;article&gt;</code>-Elements.
</p>
</article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Paleo_food.jpg">
      <h3>1) All of These Headlines Are Not Exactly The Same</h3>
      <p>In the real world, you don't know how long the content will be. Writers will write what they need. Photos will be cropped to the shape that they should be. That's good. Make a system that allows this. You want it to be flexible and robust.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Indian_bengali_food.jpg">
      <h3>2) Some Are Short</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Food_in_Miyajima.jpg">
      <h3>3) Some Headlines Can Sometimes Be Quite Long, Because It Takes Time to Make A Point</h3>
      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper...

CSS

main{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 0rem;
  grid-auto-flow:dense;
  grid-gap: 2rem;
}
article{
  overflow:hidden;
}
/* Jen Simmons' styling */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 80%;
  background: #ccc;
  line-height: 1.2; }

img {
  width: 100%; }

article {
  padding: 20px;
  border: 1px solid #999;
  border-radius: 5px;
  background: #fff; 
}

a:link,
a:visited {
  color: black; }

JavaScript

function resize(){
	arts = document.getElementsByTagName("article");
	arts = Array.prototype.slice.call(arts);
	arts.forEach(c=>{
		c.rc = 1;
		c.style.gridRow = "";
	});
	var changed = true;
	while(changed){
		console.log("resize");
		changed = false;
		arts.forEach(c=>{
			if(c.scrollTopMax>0){
				c.rc++;
				c.style.gridRow = "span "+c.rc;
				changed = true;
			}
		});
	}
}
resize();

req = false;
document.body.addEventListener("resize",evt=>{
	req = req||requestAnimationFrame(evt=>{
		req=false;
		resize();
	});
});