<ul class="gallery">
	<li>Lorem, ipsum dolor.</li>
	<li>Saepe, blanditiis quam!</li>
	<li>Cum, eos reprehenderit.</li>
	<li>Alias, saepe asperiores?</li>
	<li>Fuga, at exercitationem.</li>
	<li>Nihil, magnam! Officia!</li>
	<li>Voluptas, laudantium natus!</li>
	<li>Tempora, quibusdam sed.</li>
	<li>Asperiores, nisi repudiandae.</li>
	<li>Soluta, quas voluptatibus.</li>
	<li>Ipsam, totam saepe.</li>
	<li>Debitis, asperiores ipsum.</li>
	<li>Aliquam, minus corporis.</li>
	<li>Illum, voluptatem maxime.</li>
	<li>Qui, explicabo odio!</li>
	<li>Iusto, nihil illum.</li>
	<li>Iure, numquam facere.</li>
	<li>Possimus, non eos!</li>
	<li>Nesciunt, quas consectetur.</li>
	<li>Accusantium, earum autem!</li>
	<li>Tenetur, asperiores ullam.</li>
	<li>Facilis, adipisci repudiandae.</li>
	<li>Neque, doloribus eligendi!</li>
	<li>Perferendis, vitae suscipit.</li>
	<li>Doloremque, aperiam vitae?</li>
	<li>Assumenda, obcaecati molestias.</li>
	<li>Officiis, laborum omnis!</li>
	<li>Blanditiis, itaque vitae.</li>
	<li>Quis, impedit cumque!</li>
	<li>Omnis, aut repudiandae.</li>
	<li>Laboriosam, quidem ullam!</li>
	<li>Nihil, neque velit?</li>
	<li>Aperiam, voluptatum eligendi.</li>
	<li>Ratione, neque debitis!</li>
	<li>Sunt, ex exercitationem.</li>
	<li>Est, molestias eius.</li>
	<li>Praesentium, nulla molestiae.</li>
	<li>Illum, at nobis!</li>
	<li>Voluptate, tenetur minima!</li>
	<li>Atque, fugit cum?</li>
		<li>Lorem, ipsum dolor.</li>
	<li>Saepe, blanditiis quam!</li>
	<li>Cum, eos reprehenderit.</li>
	<li>Alias, saepe asperiores?</li>
	<li>Fuga, at exercitationem.</li>
	<li>Nihil, magnam! Officia!</li>
	<li>Voluptas, laudantium natus!</li>
	<li>Tempora, quibusdam sed.</li>
	<li>Asperiores, nisi repudiandae.</li>
	<li>Soluta, quas voluptatibus.</li>
	<li>Ipsam, totam saepe.</li>
	<li>Debitis, asperiores ipsum.</li>
	<li>Aliquam, minus corporis.</li>
	<li>Illum, voluptatem maxime.</li>
	<li>Qui, explicabo odio!</li>
	<li>Iusto, nihil illum.</li>
	<li>Iure, numquam facere.</li>
	<li>Possimus, non eos!</li>
	<li>Nesciunt, quas consectetur.</li>
	<li>Accusantium, earum autem!</li>
	<li>Tenetur, asperiores ullam.</li>
	<li>Facilis, adipisci repudiandae.</li>
	<li>Neque, doloribus eligendi!</li>
	<li>Perferendis, vitae suscipit.</li>
	<li>Doloremque, aperiam vitae?</li>
	<li>Assumenda, obcaecati molestias.</li>
	<li>Officiis, laborum omnis!</li>
	<li>Blanditiis, itaque vitae.</li>
	<li>Quis, impedit cumque!</li>
	<li>Omnis, aut repudiandae.</li>
	<li>Laboriosam, quidem ullam!</li>
	<li>Nihil, neque velit?</li>
	<li>Aperiam, voluptatum eligendi.</li>
	<li>Ratione, neque debitis!</li>
	<li>Sunt, ex exercitationem.</li>
	<li>Est, molestias eius.</li>
	<li>Praesentium, nulla molestiae.</li>
	<li>Illum, at nobis!</li>
	<li>Voluptate, tenetur minima!</li>
	<li>Atque, fugit cum?</li>
		<li>Lorem, ipsum dolor.</li>
	<li>Saepe, blanditiis quam!</li>
	<li>Cum, eos reprehenderit.</li>
	<li>Alias, saepe asperiores?</li>
	<li>Fuga, at exercitationem.</li>
	<li>Nihil, magnam! Officia!</li>
	<li>Voluptas, laudantium natus!</li>
	<li>Tempora, quibusdam sed.</li>
	<li>Asperiores, nisi repudiandae.</li>
	<li>Soluta, quas voluptatibus.</li>
	<li>Ipsam, totam saepe.</li>
	<li>Debitis, asperiores ipsum.</li>
	<li>Aliquam, minus corporis.</li>
	<li>Illum, voluptatem maxime.</li>
	<li>Qui, explicabo odio!</li>
	<li>Iusto, nihil illum.</li>
	<li>Iure, numquam facere.</li>
	<li>Possimus, non eos!</li>
	<li>Nesciunt, quas consectetur.</li>
	<li>Accusantium, earum autem!</li>
	<li>Tenetur, asperiores ullam.</li>
	<li>Facilis, adipisci repudiandae.</li>
	<li>Neque, doloribus eligendi!</li>
	<li>Perferendis, vitae suscipit.</li>
	<li>Doloremque, aperiam vitae?</li>
	<li>Assumenda, obcaecati molestias.</li>
	<li>Officiis, laborum omnis!</li>
	<li>Blanditiis, itaque vitae.</li>
	<li>Quis, impedit cumque!</li>
	<li>Omnis, aut repudiandae.</li>
	<li>Laboriosam, quidem ullam!</li>
	<li>Nihil, neque velit?</li>
	<li>Aperiam, voluptatum eligendi.</li>
	<li>Ratione, neque debitis!</li>
	<li>Sunt, ex exercitationem.</li>
	<li>Est, molestias eius.</li>
	<li>Praesentium, nulla molestiae.</li>
	<li>Illum, at nobis!</li>
	<li>Voluptate, tenetur minima!</li>
	<li>Atque, fugit cum?</li>
		<li>Lorem, ipsum dolor.</li>
	<li>Saepe, blanditiis quam!</li>
	<li>Cum, eos reprehenderit.</li>
	<li>Alias, saepe asperiores?</li>
	<li>Fuga, at exercitationem.</li>
	<li>Nihil, magnam! Officia!</li>
	<li>Voluptas, laudantium natus!</li>
	<li>Tempora, quibusdam sed.</li>
	<li>Asperiores, nisi repudiandae.</li>
	<li>Soluta, quas voluptatibus.</li>
	<li>Ipsam, totam saepe.</li>
	<li>Debitis, asperiores ipsum.</li>
	<li>Aliquam, minus corporis.</li>
	<li>Illum, voluptatem maxime.</li>
	<li>Qui, explicabo odio!</li>
	<li>Iusto, nihil illum.</li>
	<li>Iure, numquam facere.</li>
	<li>Possimus, non eos!</li>
	<li>Nesciunt, quas consectetur.</li>
	<li>Accusantium, earum autem!</li>
	<li>Tenetur, asperiores ullam.</li>
	<li>Facilis, adipisci repudiandae.</li>
	<li>Neque, doloribus eligendi!</li>
	<li>Perferendis, vitae suscipit.</li>
	<li>Doloremque, aperiam vitae?</li>
	<li>Assumenda, obcaecati molestias.</li>
	<li>Officiis, laborum omnis!</li>
	<li>Blanditiis, itaque vitae.</li>
	<li>Quis, impedit cumque!</li>
	<li>Omnis, aut repudiandae.</li>
	<li>Laboriosam, quidem ullam!</li>
	<li>Nihil, neque velit?</li>
	<li>Aperiam, voluptatum eligendi.</li>
	<li>Ratione, neque debitis!</li>
	<li>Sunt, ex exercitationem.</li>
	<li>Est, molestias eius.</li>
	<li>Praesentium, nulla molestiae.</li>
	<li>Illum, at nobis!</li>
	<li>Voluptate, tenetur minima!</li>
	<li>Atque, fugit cum?</li>
</ul>

.gallery {
	border: 1px solid lightgray;
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(10, 30vw);
	grid-template-rows: repeat(10, 30vw);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	flex-wrap: wrap;
	overflow: scroll;
	height: 90vh;
	scroll-snap-type: both mandatory;
	scroll-padding: 1rem;
}

li {
	scroll-snap-align: start;
	display: inline-block;
	border-radius: 3px;
	font-size: 0;
}

const gra = function(min, max) {
    return Math.random() * (max - min) + min;
}

const gri = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

const init = function(){
	let items = document.querySelectorAll('.gallery li');
	for (let i = 0; i < items.length; i++){
		items[i].style.minWidth = gra(20,20) + 'vw';
		items[i].style.background = randomColor({luminosity: 'light'});
	}
	cssScrollSnapPolyfill()
}
init();