// HTML <div className='container' data-columns="4"> <div className="container__block container__block--image1"></div> <div className="container__block container__block--image2"></div> <div className="container__block container__block--image3"></div> <div className="container__block"></div> </div> // CSS .container{ width: 1200px; height: 600px; margin: auto auto; background-color: red; display: grid; //replace the value we want to make dynamic with a var(--something, x) where x is a fallback if --something doesnt exist grid-template-columns: repeat(var(--column-count, 4), 1fr); place-content: center; align-items: center; justify-content: center; justify-items: center; // use data attribute vales on the html to change the variable --something &[data-columns="2"]{ --column-count: 2; } &[data-columns="3"]{ --column-count: 3; } &[data-columns="4"]{ --column-count: 4; } &__block{ width: 200px; height: 200px; background-color: rebeccapurple; border: 1px solid white; background-size: cover; background-repeat: no-repeat; background-image: var(--selected-url); &--image1{ --selected-url: url('https://source.unsplash.com/user/c_v_r') } &--image2{ --selected-url: url('https://www.kimballstock.com/images/car-stock-photos.jpg') } &--image3{ --selected-url: url('https://media.gettyimages.com/id/1636857191/photo/topshot-moto-prix-esp-catalunya-practice.jpg?s=2048x2048&w=gi&k=20&c=bt3AqEevYACDxkxf5Rom1MqE4bjHrMG2apxxTkmedJ8=') } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter