<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul> <li><img src="https://source.unsplash.com/random/300x300/?fruit" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&1" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&2" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&3" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&4" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&5" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&6" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&7" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&8" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&9" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&10" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&11" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&12" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&13" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&14" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&15" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&16" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&17" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&18" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&19" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&20" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&21" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&22" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&23" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&24" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&25" alt=""></li> </ul> Resources1× 0.5× 0.25×Rerun

@keyframes appear { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } } @media (prefers-reduced-motion: no-preference) { img { animation: appear linear; animation-timeline: view(); animation-range: entry 0 cover 25%; } } /* ETC */ img { width: 100%; max-width: 300px; border-radius: 1rem; } li { list-style: none; } li:nth-child(even) { margin-top: 8rem; } li:nth-child(odd):not(:first-child) { margin-top: -4rem; } ul { padding: 0; display: grid; grid-template-columns: auto auto; gap: 0 1rem; justify-content: center; } /* background colors if images don't show up */ img { background-color: lightblue; } img:nth-child(2) { background-color: yellow; } Resources1× 0.5× 0.25×Rerun