/* * https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/ * * Alternatives CSS * https://jsfiddle.net/ananddeepsingh/99bop25r/ */ .gridgallery {display:grid; grid-gap:1.5rem; margin:1.5rem 0;} .wrapper.full .gridgallery {padding:0 1.5rem;} .gridgallery .text-holder.vh-align {height:100%;} .gridgallery img.grid-img {width:100%; height:100%; max-height:100%; object-fit:cover; display:block;} .gridgallery .grid-item {overflow:hidden;} .gridgallery .grid-item {background-image:url('../loader/loading.gif'); background-repeat:no-repeat; background-position:center; background-size:50px;} .gridgallery .grid-item .portfolio-shader {height:100%; top:0; opacity:1; transform:scaleY(0);} .gridgallery .grid-item:hover .portfolio-shader {transform:scaleY(1);} .portfolio-shader {position:absolute; top:50%; left:0; display:block; opacity:0; -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; width:100%; z-index:3; background-color:rgba(0,0,0,0.4);} .text-holder {width:100%; color:#fff;} .text-holder h5 {padding:0px 0 2px;} .text-holder p {font-size:0.9em; line-height:1.2; margin:0;} .gridgallery.gridtwo {grid-template-columns:auto; grid-template-rows:auto;} .gridtwo .grid-item-1 {grid-column:1 / span 1; grid-row:1 / span 1;} .gridtwo .grid-item-2 {grid-column:2 / span 1; grid-row:1 / span 1;} .gridgallery.gridthree {grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr;} .gridthree .grid-item-1 {grid-column:1 / span 1; grid-row:1 / span 1;} .gridthree .grid-item-2 {grid-column:1 / span 1; grid-row:2 / span 1;} .gridthree .grid-item-3 {grid-column:2 / span 2; grid-row:1 / span 2;} .gridgallery.gridfour {grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr;} .gridfour .grid-item-1 {grid-column:1 / span 1; grid-row:1 / span 1;} .gridfour .grid-item-2 {grid-column:1 / span 1; grid-row:2 / span 1;} .gridfour .grid-item-3 {grid-column:2 / span 2; grid-row:1 / span 2;} .gridfour .grid-item-4 {grid-column:1 / span 3; grid-row:auto;} .gridgallery.gridfive {grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr;} .gridfive .grid-item-1 {grid-column:1 / span 1; grid-row:1 / span 1;} .gridfive .grid-item-2 {grid-column:2 / span 1; grid-row:1 / span 1;} .gridfive .grid-item-3 {grid-column:1 / span 1; grid-row:2 / span 1;} .gridfive .grid-item-4 {grid-column:2 / span 1; grid-row:2 / span 1;} .gridfive .grid-item-5 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridgallery.gridsix {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 11vw);} .gridsix .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridsix .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridsix .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridsix .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridsix .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridsix .grid-item-6 {grid-column:1 / span 8; grid-row:5 / span 4;} .gridgallery.gridseven {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 11vw);} .gridseven .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridseven .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridseven .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridseven .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridseven .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridseven .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridseven .grid-item-7 {grid-column:5 / span 4; grid-row:5 / span 4;} .gridgallery.grideight {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(10, 11vw);} .grideight .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .grideight .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .grideight .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .grideight .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .grideight .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .grideight .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 6;} .grideight .grid-item-7 {grid-column:5 / span 4; grid-row:5 / span 3;} .grideight .grid-item-8 {grid-column:5 / span 4; grid-row:8 / span 3;} .gridgallery.gridnine {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 11vw);} .gridnine .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridnine .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridnine .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 8;} .gridnine .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridnine .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridnine .grid-item-6 {grid-column:1 / span 2; grid-row:5 / span 2;} .gridnine .grid-item-7 {grid-column:3 / span 2; grid-row:5 / span 2;} .gridnine .grid-item-8 {grid-column:1 / span 2; grid-row:7 / span 2;} .gridnine .grid-item-9 {grid-column:3 / span 2; grid-row:7 / span 2;} .gridgallery.gridten {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(8, 11vw);} .gridten .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridten .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridten .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridten .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridten .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridten .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridten .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridten .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridten .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridten .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridgallery.grideleven {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(12, 11vw);} .grideleven .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .grideleven .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .grideleven .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .grideleven .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .grideleven .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .grideleven .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .grideleven .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .grideleven .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .grideleven .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .grideleven .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .grideleven .grid-item-11 {grid-column:1 / span 8; grid-row:9 / span 4;} .gridgallery.gridtwelve {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(12, 11vw);} .gridtwelve .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridtwelve .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridtwelve .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridtwelve .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridtwelve .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridtwelve .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridtwelve .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridtwelve .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridtwelve .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridtwelve .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridtwelve .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridtwelve .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 4;} .gridgallery.gridthirteen {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .gridthirteen .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridthirteen .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridthirteen .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridthirteen .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridthirteen .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridthirteen .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridthirteen .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridthirteen .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridthirteen .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridthirteen .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridthirteen .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridthirteen .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 4;} .gridthirteen .grid-item-13 {grid-column:1 / span 8; grid-row:13 / span 4;} .gridgallery.gridfourteen {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .gridfourteen .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridfourteen .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridfourteen .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridfourteen .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridfourteen .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridfourteen .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridfourteen .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridfourteen .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridfourteen .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridfourteen .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridfourteen .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridfourteen .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 4;} .gridfourteen .grid-item-13 {grid-column:1 / span 4; grid-row:13 / span 4;} .gridfourteen .grid-item-14 {grid-column:5 / span 4; grid-row:13 / span 4;} .gridgallery.gridfivteen {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .gridfivteen .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridfivteen .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridfivteen .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridfivteen .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridfivteen .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridfivteen .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridfivteen .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridfivteen .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridfivteen .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridfivteen .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridfivteen .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridfivteen .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 4;} .gridfivteen .grid-item-13 {grid-column:1 / span 4; grid-row:13 / span 4;} .gridfivteen .grid-item-14 {grid-column:5 / span 4; grid-row:13 / span 2;} .gridfivteen .grid-item-15 {grid-column:5 / span 4; grid-row:15 / span 2;} .gridgallery.gridsixteen {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .gridsixteen .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridsixteen .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridsixteen .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridsixteen .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridsixteen .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridsixteen .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridsixteen .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridsixteen .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridsixteen .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridsixteen .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridsixteen .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridsixteen .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 4;} .gridsixteen .grid-item-13 {grid-column:1 / span 4; grid-row:13 / span 2;} .gridsixteen .grid-item-14 {grid-column:5 / span 4; grid-row:13 / span 2;} .gridsixteen .grid-item-15 {grid-column:1 / span 4; grid-row:15 / span 2;} .gridsixteen .grid-item-16 {grid-column:5 / span 4; grid-row:15 / span 2;} .gridgallery.gridseventeen {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .gridseventeen .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridseventeen .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridseventeen .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridseventeen .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridseventeen .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridseventeen .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridseventeen .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridseventeen .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridseventeen .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridseventeen .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridseventeen .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridseventeen .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 2;} .gridseventeen .grid-item-13 {grid-column:6 / span 3; grid-row:11 / span 2;} .gridseventeen .grid-item-14 {grid-column:1 / span 4; grid-row:13 / span 2;} .gridseventeen .grid-item-15 {grid-column:5 / span 4; grid-row:13 / span 2;} .gridseventeen .grid-item-16 {grid-column:1 / span 4; grid-row:15 / span 2;} .gridseventeen .grid-item-17 {grid-column:5 / span 4; grid-row:15 / span 2;} .gridgallery.grideighteen {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .grideighteen .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .grideighteen .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .grideighteen .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .grideighteen .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .grideighteen .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .grideighteen .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .grideighteen .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .grideighteen .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .grideighteen .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .grideighteen .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .grideighteen .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .grideighteen .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 2;} .grideighteen .grid-item-13 {grid-column:6 / span 3; grid-row:11 / span 2;} .grideighteen .grid-item-14 {grid-column:1 / span 4; grid-row:13 / span 2;} .grideighteen .grid-item-15 {grid-column:5 / span 4; grid-row:13 / span 2;} .grideighteen .grid-item-16 {grid-column:1 / span 4; grid-row:15 / span 2;} .grideighteen .grid-item-17 {grid-column:5 / span 4; grid-row:15 / span 2;} .grideighteen .grid-item-18 {grid-column:1 / span 8; grid-row:17 / span 4;} .gridgallery.gridnineteen {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .gridnineteen .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridnineteen .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridnineteen .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridnineteen .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridnineteen .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridnineteen .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridnineteen .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridnineteen .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridnineteen .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridnineteen .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridnineteen .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridnineteen .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 2;} .gridnineteen .grid-item-13 {grid-column:6 / span 3; grid-row:11 / span 2;} .gridnineteen .grid-item-14 {grid-column:1 / span 4; grid-row:13 / span 2;} .gridnineteen .grid-item-15 {grid-column:5 / span 4; grid-row:13 / span 2;} .gridnineteen .grid-item-16 {grid-column:1 / span 4; grid-row:15 / span 2;} .gridnineteen .grid-item-17 {grid-column:5 / span 4; grid-row:15 / span 2;} .gridnineteen .grid-item-18 {grid-column:1 / span 4; grid-row:17 / span 4;} .gridnineteen .grid-item-19 {grid-column:5 / span 4; grid-row:17 / span 4;} .gridgallery.gridtwenty {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(16, 11vw);} .gridtwenty .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridtwenty .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridtwenty .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridtwenty .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridtwenty .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridtwenty .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridtwenty .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridtwenty .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridtwenty .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridtwenty .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridtwenty .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridtwenty .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 2;} .gridtwenty .grid-item-13 {grid-column:6 / span 3; grid-row:11 / span 2;} .gridtwenty .grid-item-14 {grid-column:1 / span 2; grid-row:13 / span 2;} .gridtwenty .grid-item-15 {grid-column:3 / span 2; grid-row:13 / span 2;} .gridtwenty .grid-item-16 {grid-column:1 / span 2; grid-row:15 / span 2;} .gridtwenty .grid-item-17 {grid-column:3 / span 2; grid-row:15 / span 2;} .gridtwenty .grid-item-18 {grid-column:5 / span 4; grid-row:13 / span 6;} .gridtwenty .grid-item-19 {grid-column:1 / span 2; grid-row:17 / span 2;} .gridtwenty .grid-item-20 {grid-column:3 / span 2; grid-row:17 / span 2;} .gridgallery.gridtwentyone {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(23, 11vw);} .gridtwentyone .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridtwentyone .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridtwentyone .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridtwentyone .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridtwentyone .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridtwentyone .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridtwentyone .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridtwentyone .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridtwentyone .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridtwentyone .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridtwentyone .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridtwentyone .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 2;} .gridtwentyone .grid-item-13 {grid-column:6 / span 3; grid-row:11 / span 2;} .gridtwentyone .grid-item-14 {grid-column:1 / span 2; grid-row:13 / span 2;} .gridtwentyone .grid-item-15 {grid-column:3 / span 2; grid-row:13 / span 2;} .gridtwentyone .grid-item-16 {grid-column:1 / span 2; grid-row:15 / span 2;} .gridtwentyone .grid-item-17 {grid-column:3 / span 2; grid-row:15 / span 2;} .gridtwentyone .grid-item-18 {grid-column:5 / span 4; grid-row:13 / span 6;} .gridtwentyone .grid-item-19 {grid-column:1 / span 2; grid-row:17 / span 2;} .gridtwentyone .grid-item-20 {grid-column:3 / span 2; grid-row:17 / span 2;} .gridtwentyone .grid-item-21 {grid-column:1 / span 8; grid-row:19 / span 5;} .gridgallery.gridtwentytwo {grid-template-columns:repeat(8, 1fr); grid-template-rows:repeat(20, 11vw);} .gridtwentytwo .grid-item-1 {grid-column:1 / span 2; grid-row:1 / span 2;} .gridtwentytwo .grid-item-2 {grid-column:3 / span 2; grid-row:1 / span 2;} .gridtwentytwo .grid-item-3 {grid-column:5 / span 4; grid-row:1 / span 4;} .gridtwentytwo .grid-item-4 {grid-column:1 / span 2; grid-row:3 / span 2;} .gridtwentytwo .grid-item-5 {grid-column:3 / span 2; grid-row:3 / span 2;} .gridtwentytwo .grid-item-6 {grid-column:1 / span 4; grid-row:5 / span 4;} .gridtwentytwo .grid-item-7 {grid-column:5 / span 2; grid-row:5 / span 2;} .gridtwentytwo .grid-item-8 {grid-column:7 / span 2; grid-row:5 / span 2;} .gridtwentytwo .grid-item-9 {grid-column:5 / span 2; grid-row:7 / span 2;} .gridtwentytwo .grid-item-10 {grid-column:7 / span 2; grid-row:7 / span 2;} .gridtwentytwo .grid-item-11 {grid-column:1 / span 5; grid-row:9 / span 4;} .gridtwentytwo .grid-item-12 {grid-column:6 / span 3; grid-row:9 / span 2;} .gridtwentytwo .grid-item-13 {grid-column:6 / span 3; grid-row:11 / span 2;} .gridtwentytwo .grid-item-14 {grid-column:1 / span 2; grid-row:13 / span 2;} .gridtwentytwo .grid-item-15 {grid-column:3 / span 2; grid-row:13 / span 2;} .gridtwentytwo .grid-item-16 {grid-column:1 / span 2; grid-row:15 / span 2;} .gridtwentytwo .grid-item-17 {grid-column:3 / span 2; grid-row:15 / span 2;} .gridtwentytwo .grid-item-18 {grid-column:1 / span 2; grid-row:17 / span 2;} .gridtwentytwo .grid-item-19 {grid-column:3 / span 2; grid-row:17 / span 2;} .gridtwentytwo .grid-item-20 {grid-column:1 / span 2; grid-row:19 / span 2;} .gridtwentytwo .grid-item-21 {grid-column:3 / span 2; grid-row:19 / span 2;} .gridtwentytwo .grid-item-22 {grid-column:5 / span 4; grid-row:13 / span 8;} .gridgallery.gridmore {grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(auto, auto); grid-auto-flow:dense;} .gridmore .grid-item {grid-column:auto; grid-row:auto;} .gridmore .grid-item-1 {grid-column:1 / span 2; grid-row:1 / 2;} .gridmore .grid-item-10 {grid-column-end:span 2; grid-row-end:span 2;} .gridmore .grid-item-20 {grid-column-end:span 4; grid-row-end:span 2;} .gridmore .grid-item-26 {grid-column:3 / span 2;} .gridmore .grid-item-30 {grid-column-end:span 2; grid-row-end:span 2;} .gridmore .grid-item-34 {grid-column:1 / span 2;} .gridmore .grid-item-36 {grid-column:3 / span 2;} .gridmore .grid-item-40 {grid-column-end:span 4; grid-row-end:span 2;} .gridmore .grid-item.gridend {grid-column:span 4; grid-row:auto;} /* ############################################################################################### */ /* ------------------------------------------------------------- His Responsiveness ------------------------------------------------------------- */ /* ############################################################################################### */ @media screen and (max-width:500px) { }/* Ende @media screen */ @media screen and (min-width:1201px) { .gridgallery .grid-parent {grid-template-columns:1fr 1fr 1fr;} }/* Ende @media screen */ @media screen and (min-width:801px) and (max-width:1200px) { .gridgallery .grid-parent {grid-template-columns:1fr 1fr;} }/* Ende @media screen */ @media screen and (min-width:320px) and (max-width:800px) { .gridgallery .grid-parent {display:flex; flex-wrap:wrap; padding:0 4px;} .gridgallery .grid-item {flex:40%;} }/* Ende @media screen */