Wie zentriere ich Isotop und ordne seine Elemente?

Question

Zuerst habe ich nach einer Antwort auf einige ähnliche gestellte Fragen gesucht, bevor ich diese gemacht habe, aber keine war hilfreich genug. Ich habe Schwierigkeiten, das Isotop auf mein Projekt zu zentrieren, ohne zwischen seinen Elementen zusätzlichen Platz zu schaffen. Außerdem kann ich seine Elemente (wie die mit den Abmessungen 300x460) nicht wie in den folgenden Screenshots beschrieben anordnen. Ich habe versucht, es mit Rand links nach der Mitte zu bewegen, aber es würde die Elemente aneinander haften lassen.

My current work

What I want to achieve

Hier ist meine Arbeit auf HTML und CSS so weit:

<div class="portfolio"> 
    <div class="container"> 
     <div class="portfolio-gallery"> 
      <div class="row grid"> 
       <div class="col-md-3 grid-item"> 
        <img src="assets/images/placeholdit300x260.png"> 
       </div> 
       <div class="col-md-3 grid-item grid-item--width2"> 
        <img src="assets/images/placeholdit300x220.png"> 
       </div> 
       <div class="col-md-3 grid-item"> 
        <img src="assets/images/placeholdit300x310.png"> 
       </div> 
       <div class="col-md-3 grid-item"> 
        <img src="assets/images/placeholdit300x200.png"> 
       </div> 
       <div class="col-md-3 grid-item"> 
        <img src="assets/images/placeholdit300x460.png"> 
       </div> 
       <div class="col-md-3 grid-item"> 
        <img src="assets/images/placeholdit300x370.png"> 
       </div> 
       <div class="col-md-3 grid-item"> 
        <img src="assets/images/placeholdit300x200.png"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

.portfolio{ 
    padding-top: 64px; 
    padding-bottom: 77px; 
} 
.portfolio .portfolio-gallery{ 
    margin: 60px auto; 
} 
.portfolio .grid-item{ 
    margin-bottom: 20px; 
} 

Answer 1

Ich bin nicht sicher, warum Sie Bootstrap-Klassen in Ihren Isotop-Elementen verwenden. Auch die Bestellfrage macht mir nicht viel Sinn. Es liegt in der Natur des Isotops, seine Elemente bei jeder Größenänderung neu anzuordnen, wobei die Regeln vom Layout-Modus abhängen. Sortieren ist sinnvoll, wenn Sie Elemente mit gleichen Dimensionen haben, wie in der Sortierdemo (https://isotope.metafizzy.co/sorting.html).

hier ein codepen mit Isotopen, den Aufbau der Kombination von Fliesen aus dem Bild: https://codepen.io/Sixl/full/GMaQre/

Vielleicht ist es irgendwie von Hilfe für Sie?

CSS:

.grid { 
    background-color: #none; 
    width: 960px; 
    margin: 10px auto; 
    &:after { 
    content: ''; 
    display: block; 
    clear: both; 
    } 
} 

.grid-item { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: 200px; 
    margin: 10px; 
    padding: 10px 30px; 
    background: #bada55; 
    color: white; 
    font-size: 96px; 
    border-radius: 3px; 
    box-shadow: 2px 2px 12px rgba(0,0,0,0.25); 
    &--220 { height: 220px;} 
    &--260 { height: 260px;} 
    &--310 { height: 310px;} 
    &--370 { height: 370px;} 
    &--460 { height: 460px;} 
} 

JS:

var $grid = $('.grid').isotope({ 
    itemSelector: '.grid-item', 
    layoutMode: 'packery', 
}); 

HTML:

<div class="grid"> 
    <div class="grid-item grid-item--260">1</div> 
    <div class="grid-item grid-item--220">2</div> 
    <div class="grid-item grid-item--310">3</div> 
    <div class="grid-item grid-item--460">4</div> 
    <div class="grid-item grid-item--200">5</div> 
    <div class="grid-item grid-item--370">6</div> 
    <div class="grid-item grid-item--200">7</div> 
</div> 

Answer 2

Bilder - wie Text untereinander geht, so dass Ihr Bild, um nicht in Ordnung ist. Plus Ich musste "make 3 columns" in CSS hinzufügen. ... und "gehen Spalten nebeneinander" ... und ein wenig geklärt.

<div class="portfolio"> 
    <div class="portfolio-gallery"> 
     <div class="grid-item"> 
      <img src="assets/images/placeholdit300x260.png"> 
     </div> 
     <div class="grid-item"> 
      <img src="assets/images/placeholdit300x200.png"> 
     </div> 
     <div class="grid-item"> 
      <img src="assets/images/placeholdit300x200.png"> 
     </div> 
     <div class="grid-item"> 
      <img src="assets/images/placeholdit300x220.png"> 
     </div> 
     <div class="grid-item"> 
      <img src="assets/images/placeholdit300x460.png"> 
     </div> 
     <div class="grid-item"> 
      <img src="assets/images/placeholdit300x310.png"> 
     </div> 
     <div class="grid-item"> 
      <img src="assets/images/placeholdit300x370.png"> 
     </div> 
    </div> 
</div> 

.portfolio{ 
    padding-top: 64px; 
    padding-bottom: 77px; 
    float: left; 
    column-count: 3; 
} 
.portfolio .grid-item{ 
    margin-bottom: 20px; 
}`