title
A prototype
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.grid-container { display: flex; height: 100%; flex-basis: auto; } .grid-container > div { cursor: pointer; flex-grow: 1; flex-shrink: 1; flex-basis: auto; background: gray; margin: 5px 5px 2.5px 5px; height: 200px; display: flex; justify-content: center; align-items: center; transition: flex-grow 0.2s ease, height 0.2s ease; } .grid-container.active > div.active { background: tomato; } .grid-container .collapsed { flex-grow: 0.1; } .grid-container:not(.active) .collapsed { height: 30px; } .grid-container:not(.active) > div.active-passive, .grid-container.active > div.active { flex-grow: 5; } .grid-container.active > div.active, .grid-container.active > div { height: 400px; }
$('.grid-container > div').click(function(e){ var allGrids = $('.grid-container'); var allItems = $('.grid-container > div'); var parent = $(this).closest( '.grid-container' ); allGrids.removeClass("active"); allItems.removeClass("active"); allItems.removeClass("active-passive"); allItems.addClass("collapsed"); parent.addClass('active'); var num = $(this).attr('data-pos'); var sameColumn = $("[data-pos='" + num + "']"); $( sameColumn ).addClass("active-passive"); $(this).addClass('active') })
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code