Zentriertes und responsives Masonry-Layout mit isotope.js

Dieser Code passt das Masonry-Layout einer Webseite dynamisch an verschiedene Bildschirmgrössen an. Mithilfe von Isotope.js wird je nach Fensterbreite zwischen 1, 2, 3 oder 4 Spalten gewechselt. Die Spaltenbreite wird dabei direkt aus dem CSS der .single_condition-Elemente entnommen, und der gesamte Masonry-Block bleibt dabei stets zentriert.

var $grid = $(".is-style-masonry").isotope({
    itemSelector: ".single_condition",
    layoutMode: "masonry",
    masonry: {
        gutter: 50,
        columnWidth: parseInt($(".single_condition").css("width"))
  }
});

function updateMasonry() {
	var windowWidth = $(window).width();
	var container = $(".is-style-masonry");
	var containerPadding =
	  parseInt($(".entry-content").css("margin-left")) +
	  parseInt($(".entry-content").css("margin-right"));

	// Dynamische Spaltenbreite aus dem CSS holen
	var columnWidth = parseInt($(".single_condition").css("width"));

	// Dynamische Berechnung für die Containerbreiten basierend auf der Spaltenbreite
	var layout4Columns = columnWidth * 4 + 3 * 50; 
	var layout3Columns = columnWidth * 3 + 2 * 50; 
	var layout2Columns = columnWidth * 2 + 1 * 50; 
	var layout1Column = columnWidth * 1 + 0 * 50; 

	// Berücksichtige die Padding-Werte des Containers
	var effectiveWidth = windowWidth - containerPadding;

	if (effectiveWidth >= layout4Columns) {
		container.css("width", layout4Columns + "px");
	} else if (effectiveWidth >= layout3Columns) {
		container.css("width", layout3Columns + "px");
	} else if (effectiveWidth >= layout2Columns) {
		container.css("width", layout2Columns + "px");
	} else if (effectiveWidth >= layout1Column) {
		container.css("width", layout1Column + "px");
	} else{
		container.css("width", "100%");
	}

	// Aktualisiere Isotope mit der dynamischen Spaltenbreite
	$grid.isotope({
		masonry: {
			columnWidth: columnWidth, 
			gutter: 50, 
		},
	});
}

updateMasonry();
$(window).resize(updateMasonry);

Der Code sorgt dafür, dass das Layout automatisch an die verfügbare Breite angepasst wird und die Inhalte immer gut ausgerichtet bleiben.

Hier noch ein passendes CSS

.is-style-masonry {
    width: 100%;
    margin: 0 auto; 
    display: flex;
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 50px;
    }

.is-style-masonry .single_condition {
    margin-bottom: 50px; 
    padding: 36px;
    width: 400px;
    box-sizing: border-box;
    gap: 20px;
    border-radius: 24px;
    background-color: #b1b1b1;
    }