cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <center>
  <h1>
    Responsive, pinterest-style masonic tiles using CSS Grid (only - no JS, no flexbox).
  </h1>
  <p>
    Change browser width and note how everything reflows, _and_ the red tile numbers stay in correct order.
  </p>
</center>
<div class="results">    

  <div class="ht1">
    <img src="https://archive.org/services/img/NeneMalo-2012MeDeclaroCulpable" style="height:45px"/>
      <span>1</span>
      NENE MALO - 2012 Me declaro culpable
    </div>

  <div class="ht4">
    <img src="https://archive.org/services/img/dracula_1006_librivox" style="height:180px"/>
      <span>2</span>
      Dracula (version 2)
    </div>

      <div class="ht4">
      <img src="https://archive.org/services/img/beyond_good_and_evil_librivox" style="height:180px"/>
      <span>3</span>
      Beyond Good and Evil
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/gd77-05-08.sbd.hicks.4982.sbeok.shnf" style="height:45px"/>
      <span>4</span>
      Grateful Dead Live at Barton Hall,...
    </div>

      <div class="ht4">
      <img src="https://archive.org/services/img/CANDY032" style="height:180px"/>
      <span>5</span>
      Christmasasaurus vol. 2
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/TheInternetsOwnBoyTheStoryOfAaronSwartz" style="height:123px"/>
      <span>6</span>
      The Internet's Own Boy: The Story of...
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/Im_In_A_Pickle" style="height:45px"/>
      <span>7</span>
      I'm In A Pickle
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/arcade_mpatrol" style="height:58px"/>
      <span>8</span>
      Internet Arcade: Moon Patrol
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/gd_nrps70-05-15.sbd.reynolds-kaplan.29473.shnf" style="height:45px"/>
      <span>9</span>
      Grateful Dead Live at Fillmore East...
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/arcade_shollow" style="height:59px"/>
      <span>10</span>
      Internet Arcade: Satan's Hollow
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/Leadbelly-Where_Did_You_Sleep" style="height:45px"/>
      <span>11</span>
      Where Did You Sleep Last Night?
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/um2004-02-07.shnf" style="height:45px"/>
      <span>12</span>
      Umphrey's McGee Live at Fox Theatre on...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/FbiReturnsRiseupServerToMayFirstpeopleLinkCabinet" style="height:123px"/>
      <span>13</span>
      FBI returns Riseup server to May...
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/radams2006-02-15.SD.flac16" style="height:45px"/>
      <span>14</span>
      Ryan Adams Live at Carling Academy on...
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/NasaAudioHighlightReels" style="height:45px"/>
      <span>15</span>
      NASA Audio Highlight Reels, Soundbites...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/CopyingIsNotTheft" style="height:123px"/>
      <span>16</span>
      Copying Is Not Theft
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/StoreWars" style="height:124px"/>
      <span>17</span>
      Store Wars
    </div>

      <div class="ht2">
      <img src="https://archive.org/services/img/msdos_Star_Wars_1988" style="height:113px"/>
      <span>18</span>
      Star Wars
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/FallenHeir" style="height:123px"/>
      <span>19</span>
      Fallen Heir
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/bm1995-09-12.sbd" style="height:45px"/>
      <span>20</span>
      Blind Melon Live at Commodore Ballroom...
    </div>

      <div class="ht7">
      <img src="https://archive.org/services/img/katchewanookacar00agri" style="height:282px"/>
      <span>21</span>
      Katchewanooka Herald (Lakefield,...
    </div>

      <div class="ht2">
      <img src="https://archive.org/services/img/msdos_Dragons_Lair_1993_1993" style="height:113px"/>
      <span>22</span>
      Dragon's Lair
    </div>

      <div class="ht4">
      <img src="https://archive.org/services/img/mrspaceship_pc_librivox" style="height:180px"/>
      <span>23</span>
      Mr. Spaceship
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/wlb20060128pvm480flac16" style="height:45px"/>
      <span>24</span>
      Wes Loper [Band] Live at The Shedhouse...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/Detour_movie" style="height:123px"/>
      <span>25</span>
      Detour
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/Mosh2" style="height:123px"/>
      <span>26</span>
      Eminem's Mosh
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/mac_DarkCastle_1_2" style="height:120px"/>
      <span>27</span>
      Dark Castle
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/Kinetic_Art_Demo_Video" style="height:124px"/>
      <span>28</span>
      Kinetic Art Demo Video
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/allofthedead" style="height:123px"/>
      <span>29</span>
      All of the Dead
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/reremaster" style="height:123px"/>
      <span>30</span>
      Star Wars re-remastered to high quality...
    </div>

      <div class="ht2">
      <img src="https://archive.org/services/img/morebooks" style="height:98px"/>
      <span>31</span>
      More Books!
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/werewolf_in_a_girls_dormitory_ipod" style="height:123px"/>
      <span>32</span>
      Werewolf in a Girls' Dormitory iPod...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/TVAdArchiveNPC-2016-01-22" style="height:123px"/>
      <span>33</span>
      Political TV Ad Archive launch at...
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/sp1997-01-26.flac16" style="height:45px"/>
      <span>34</span>
      Smashing Pumpkins Live at War Memorial...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/A_Digital_Media_Primer_for_Geeks" style="height:123px"/>
      <span>35</span>
      A Digital Media Primer for Geeks
    </div>

      <div class="ht5">
      <img src="https://archive.org/services/img/DNALOUNGE-2006-10-14" style="height:228px"/>
      <span>36</span>
      DNA Lounge Live: Bootie SF (2006-10-14)
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/safety_harm_hides" style="height:124px"/>
      <span>37</span>
      Safety: Harm Hides at Home
    </div>

      <div class="ht7">
      <img src="https://archive.org/services/img/Cracker2008-09-13.flac16" style="height:285px"/>
      <span>38</span>
      Cracker Live at Pappy And Harriet's...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/InternetArchive35mmStockFootageSampleReel" style="height:123px"/>
      <span>39</span>
      Internet Archive 35mm Stock Footage...
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/dcfc2006-07-03.dpa4061.flac16" style="height:45px"/>
      <span>40</span>
      Death Cab for Cutie Live at Folkets...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/rise_of_the_living_dead_2" style="height:124px"/>
      <span>41</span>
      Rise of the Living Dead, Episode II
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/Political_Commercial" style="height:123px"/>
      <span>42</span>
      Political Commercial
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/dn2007-0917_vid" style="height:123px"/>
      <span>43</span>
      Democracy Now! Monday, September 17,...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/AaronSwartzMemorialAtTheInternetArchive" style="height:123px"/>
      <span>44</span>
      Aaron Swartz Memorial at the Internet...
    </div>

      <div class="ht4">
      <img src="https://archive.org/services/img/HardlyJustBegun" style="height:180px"/>
      <span>45</span>
      Hardly Just Begun
    </div>

      <div class="ht6">
      <img src="https://archive.org/services/img/IslandOfBali" style="height:270px"/>
      <span>46</span>
      Island Of Bali
    </div>

      <div class="ht2">
      <img src="https://archive.org/services/img/camaro" style="height:101px"/>
      <span>47</span>
      2012 Camaro RS Transformers Edition
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/djspooky2003-09-04.shnf" style="height:45px"/>
      <span>48</span>
      DJ Spooky Live at Trasheteria, Guelph...
    </div>

      <div class="ht3">
      <img src="https://archive.org/services/img/ToddyChocDrinkFearlessFred" style="height:123px"/>
      <span>49</span>
      Toddy Chocolate Drink: Fearless Fred...
    </div>

      <div class="ht1">
      <img src="https://archive.org/services/img/mek2004-03-23.shnf" style="height:45px"/>
      <span>50</span>
      Mekons Live at Starry Plough on...
    </div>

  </div>
            
          
!
            
              /**
Each tile's image height is known in advance.  at archive.org we use backend (PHP) to fetch that height and then simply have to run a formula like this for picking which 'htX' class to use:
  'ht' . min(7, floor($imgHT / 40));

We assume 20px gutters, and we _also_ split our grid into 20px high row increments (minimum here is 2 row spans per tile).

So,
a 'row span' of 2 is  60px high,
a 'row span' of 3 is 100px high, etc.
 */
.results {
   /* fit in up to 5 columns of 180px wide tiles, 20px gutters: 5*180 + 4*20: */
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;
  /* fit as many columns as possible, 180px wide each: */
  grid-template-columns: repeat(auto-fill, 180px);
  /* each row is 20px high -- we always span 2+ */
  grid-auto-rows: minmax(20px, auto);
  justify-content: center;	
}

.results > * {
  width: 180px;
  /* only for older non-grid browsers: */
  float: left;  
  /* only for older non-grid browsers: */
  margin: 15px;
}

.ht0 { grid-row-end: span 2; }
.ht1 { grid-row-end: span 3; }
.ht2 { grid-row-end: span 4; }
.ht3 { grid-row-end: span 5; }
.ht4 { grid-row-end: span 6; }
.ht5 { grid-row-end: span 7; }
.ht6 { grid-row-end: span 8; }
.ht7 { grid-row-end: span 9; }

@supports (display: grid) {
  .results > * {
    /* modern browser -- grid-gap takes care of us: */
    margin: 0 auto;
  }
}

/* cosmetics only from here on down */
.results > * {
  background-color: #ddd;
}
.results > * img {
  max-width: 100%;
}
.results > * span {
  font-size: 125%;
  color: #cc3333;
  font-family: 'Ultra';
}
            
          
!
999px
Loading ..................

Console