HarryAdney · January 26, 2025 09:55
diff --git a/masonry.html b/masonry.html
 <!DOCTYPE html>
 <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Masonry Layout</title>
    <link rel="stylesheet" href="./styles.css">
  </head>

  <body>
    <div class="masonry wrapper switcher">
      <!-- Column 1 -->
      <div class="flow">
        <img src="https://assets.codepen.io/174183/aditya-chinchure-n0NZWbY9bZk-unsplash.jpg" alt="A snowy city street in winter, with footprints trailing across the sidewalk. Flags for the Chicago Symphony Center and an American flag hang from tall buildings, while streetlights and a snow-covered bus stop frame the scene." loading="lazy">
        <img src="https://assets.codepen.io/174183/alice-kotlyarenko-n6TQKt2UlaM-unsplash.jpg" alt="Silhouetted figures walking through a dimly lit urban tunnel at night. The structure above is made of glass, reflecting vibrant neon lights in green, blue, and red, while a modern building looms in the background." loading="lazy">
        <img src="https://assets.codepen.io/174183/nico-knaack-hPtasJgBm40-unsplash.jpg" alt="A transit conductor in a beige uniform and navy hat walks alongside an old-fashioned yellow tram with blue stripes. The tram doors are open, and orange 'Ausstieg' (exit) signs are visible, as overhead cables crisscross the bright blue sky." loading="lazy">
      </div>

      <!-- Column 2 -->
      <div class="flow">
        <img src="https://assets.codepen.io/174183/kellen-riggin-svLP2OfTFOo-unsplash.jpg" alt="A round convex security mirror mounted on a beige wall reflects a driveway with a 'Do Not Enter' sign. A surveillance camera sits above the mirror, while greenery peeks into the bottom corner of the frame." loading="lazy">
        <img src="https://assets.codepen.io/174183/liam-drinan---dxPBQhBi0-unsplash.jpg" alt="A narrow, sunlit urban alleyway lined with modern buildings featuring large windows and string lights. People are sitting at outdoor tables, walking along benches, and enjoying the casual ambiance of the street." loading="lazy">
        <img src="https://assets.codepen.io/174183/daniel-akselrod-RZBJ2ZSQq1c-unsplash.jpg" alt="A quiet nighttime tram station with glowing streetlights and empty train tracks running through the foreground. The scene includes modern platforms, city buildings with lit-up windows, and a distant row of traffic lights." loading="lazy">
      </div>

      <!-- Column 3 -->
      <div class="flow">
        <img src="https://assets.codepen.io/174183/nir-himi-jpeRAoptTGQ-unsplash.jpg" alt="A breathtaking city skyline at sunset, featuring One World Trade Center and nearby skyscrapers silhouetted against a pastel gradient sky of pink and orange. Blurred figures in the foreground provide a sense of scale and human presence." loading="lazy">
        <img src="https://assets.codepen.io/174183/pavel-moiseev-i4YbrGPtWME-unsplash.jpg" alt="An empty underground metro station with bright lighting, bold orange-tiled columns, and sleek white ceiling panels. Parallel train tracks run into the dark distance, while signs indicate the station's name and an upcoming train." loading="lazy">
        <img src="https://assets.codepen.io/174183/tim-meyer-ZA6oE5d0GtQ-unsplash.jpg" alt="A vintage green and white car driving across a yellow pedestrian crossing in a bustling city. People stand nearby, including an older man with a white hat and a woman in glasses, as the background features a shop with a large 'SALE' sign." loading="lazy">
      </div>
    </div>
  </body>

 </html>
diff --git a/scripts.js b/scripts.js
 ‎‎
diff --git a/styles.css b/styles.css
 .masonry {
  --gutter: 0.25em;
  --flow-space: var(--gutter);
  --switcher-target-container-width: 28rem;
 }

 .masonry img {
  width: 100%;
 }

 .switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 1em);
  align-items: var(--switcher-vertical-alignment, flex-start);
 }

 .switcher > * {
  flex-grow: 1;
  flex-basis: calc(
    (var(--switcher-target-container-width, 40rem) - 100%) * 999
  );
 }

 .flow > * + * {
  margin-block-start: var(--flow-space, 1em);
 }

 .wrapper {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
 }

 body {
  padding: 1em 0;
  background: #ffffff;
 }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Basic Masonry Layout</title>
	<link rel="stylesheet" href="./styles.css">
	</head>

	<body>
	<div class="masonry wrapper switcher">
	<!-- Column 1 -->
	<div class="flow">
	<img src="https://assets.codepen.io/174183/aditya-chinchure-n0NZWbY9bZk-unsplash.jpg" alt="A snowy city street in winter, with footprints trailing across the sidewalk. Flags for the Chicago Symphony Center and an American flag hang from tall buildings, while streetlights and a snow-covered bus stop frame the scene." loading="lazy">
	<img src="https://assets.codepen.io/174183/alice-kotlyarenko-n6TQKt2UlaM-unsplash.jpg" alt="Silhouetted figures walking through a dimly lit urban tunnel at night. The structure above is made of glass, reflecting vibrant neon lights in green, blue, and red, while a modern building looms in the background." loading="lazy">
	<img src="https://assets.codepen.io/174183/nico-knaack-hPtasJgBm40-unsplash.jpg" alt="A transit conductor in a beige uniform and navy hat walks alongside an old-fashioned yellow tram with blue stripes. The tram doors are open, and orange 'Ausstieg' (exit) signs are visible, as overhead cables crisscross the bright blue sky." loading="lazy">
	</div>

	<!-- Column 2 -->
	<div class="flow">
	<img src="https://assets.codepen.io/174183/kellen-riggin-svLP2OfTFOo-unsplash.jpg" alt="A round convex security mirror mounted on a beige wall reflects a driveway with a 'Do Not Enter' sign. A surveillance camera sits above the mirror, while greenery peeks into the bottom corner of the frame." loading="lazy">
	<img src="https://assets.codepen.io/174183/liam-drinan---dxPBQhBi0-unsplash.jpg" alt="A narrow, sunlit urban alleyway lined with modern buildings featuring large windows and string lights. People are sitting at outdoor tables, walking along benches, and enjoying the casual ambiance of the street." loading="lazy">
	<img src="https://assets.codepen.io/174183/daniel-akselrod-RZBJ2ZSQq1c-unsplash.jpg" alt="A quiet nighttime tram station with glowing streetlights and empty train tracks running through the foreground. The scene includes modern platforms, city buildings with lit-up windows, and a distant row of traffic lights." loading="lazy">
	</div>

	<!-- Column 3 -->
	<div class="flow">
	<img src="https://assets.codepen.io/174183/nir-himi-jpeRAoptTGQ-unsplash.jpg" alt="A breathtaking city skyline at sunset, featuring One World Trade Center and nearby skyscrapers silhouetted against a pastel gradient sky of pink and orange. Blurred figures in the foreground provide a sense of scale and human presence." loading="lazy">
	<img src="https://assets.codepen.io/174183/pavel-moiseev-i4YbrGPtWME-unsplash.jpg" alt="An empty underground metro station with bright lighting, bold orange-tiled columns, and sleek white ceiling panels. Parallel train tracks run into the dark distance, while signs indicate the station's name and an upcoming train." loading="lazy">
	<img src="https://assets.codepen.io/174183/tim-meyer-ZA6oE5d0GtQ-unsplash.jpg" alt="A vintage green and white car driving across a yellow pedestrian crossing in a bustling city. People stand nearby, including an older man with a white hat and a woman in glasses, as the background features a shop with a large 'SALE' sign." loading="lazy">
	</div>
	</div>
	</body>

	</html>
	.masonry {
	--gutter: 0.25em;
	--flow-space: var(--gutter);
	--switcher-target-container-width: 28rem;
	}

	.masonry img {
	width: 100%;
	}

	.switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, 1em);
	align-items: var(--switcher-vertical-alignment, flex-start);
	}

	.switcher > * {
	flex-grow: 1;
	flex-basis: calc(
	(var(--switcher-target-container-width, 40rem) - 100%) * 999
	);
	}

	.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
	}

	.wrapper {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
	}

	body {
	padding: 1em 0;
	background: #ffffff;
	}