Mauerwerk-layout mit css-raster

Ihre Frage, legen Sie die Höhe von jedem Element einzeln. Wenn Sie glücklich sind, dies zu tun, dann eine Mauerwerk-layout kann leicht erreicht werden, mit grid.

Statt der Festlegung einer Höhe für jedes Element festgelegt grid-row-end so, dass jedes Element umfasst eine bestimmte Anzahl von Zeilen.

 <div class="item" style="grid-row-end: span 5"></div>

Die Höhe des Elements wird dann davon abhängen, die Werte von grid-auto-rows und grid-row-gap die Sie für das raster.

Ich habe ein Codepen hier: https://codepen.io/andybarefoot/pen/NaprOB

Wenn Sie nicht möchten, individuell einstellen grid-row-end Wert für jedes Element, das Sie verwenden können, ein bisschen JavaScript zu tun, sondern dynamisch. Habe ich eine weitere "container" - div in jede Position und Messen Sie die Höhe dieses Containers zu berechnen, wie viele Zeilen der Artikel muss span. Ich Sie auf die Seite laden und noch einmal für jedes Element, wenn alle Bilder geladen sind (wie die Höhe der Inhalte wird nicht geändert haben). Wenn Sie kombinieren diesen Ansatz mit einem responsive layout, dann sollten Sie auch neu berechnen auf der Seite passen Sie die Breite der Spalten verändert haben kann und dies wirkt sich auf die Höhe des Inhalts.

Hier mein vollständiges Beispiel mit responsive Spalte Größenanpassung: https://codepen.io/andybarefoot/pen/QMeZda

Wenn Sie Elemente mit Variablen breiten können Sie dennoch einen ähnlichen Effekt erzielen, aber die Verpackung der Gitter wird nicht perfekt sein und das Element der Bestellung kann geändert werden, um die Optimierung der Verpackung.

Ich schrieb einen blog auf Medium, über diesen Ansatz im Fall es von Interesse ist: Eine Mauerwerk-Stil-layout mit CSS-Grid -

Können Sie festlegen span Werte für grid-row-end dynamisch (mit ein wenig JS, wie man basierend auf meinen Codepen-experiment im Beispiel unten) und verwenden Sie die dense Schlüsselwort für grid-auto-placement:

JS:

const gridStyles = getComputedStyle(document.querySelector('.wrapper',null));
const rowHeight = parseInt(gridStyles.getPropertyValue('--grid-row-height'));
const gap = parseInt(gridStyles.getPropertyValue('--grid-gutter'));;

let makeGrid = function() {
  let items = document.querySelectorAll('.item');
  for (let i=0, item; item = items[i]; i++) {
    //take an item away from grid to measure it
    item.classList.add('is-being-measured');
    let height = item.offsetHeight;
    //calcylate the row span
    let rowSpan = Math.ceil((height + gap)/(rowHeight + gap));
    //set the span value for grid-row-end
    item.style.gridRowEnd = 'span '+rowSpan;
    //return the item into the grid
    item.classList.remove('is-being-measured');
  }
}

window.addEventListener('load', makeGrid);
window.addEventListener('resize', () => {
  clearTimeout(makeGrid.resizeTimer);
  makeGrid.resizeTimer = setTimeout(makeGrid, 50);
});

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 330px);
  --grid-gutter: 10px;
  grid-gap: var(--grid-gutter);
  --grid-row-height: 10px;
  grid-auto-rows: var(--grid-row-height);
  grid-auto-flow: row dense;
  position: relative;
}

.item {
  background: black;
  color: white;
  border-radius: 5px;
}
.item.is-being-measured {
  /* temporary styles for measuring grid items */
  position: absolute;
  width: 330px;
  top: 0;
  left: 0;
}

.item > * { margin-left: 20px; }

HTML:

<div class="wrapper">
  <div class="item"><h3>1.1</h3><p>1.2</p></div>
  <div class="item"><p>2.1</p><p>2.2</p><p>2.3</p><p>2.4</p><p>2.5</p></div>
  <div class="item"><h2>3.1</h2></div>
  <div class="item"><h2>4.1</h2><p>4.2</p><p>4.3</p><p>4.4</p></div>
  <div class="item"><p>5.1</p><p>5.2</p><p>5.3</p><p>5.4</p></div>
  <div class="item"><h2>6.1</h2><p>6.2</p></div>
  <div class="item"><h2>7.1</h2><p>7.2</p><p>7.3</p></div>
  <div class="item"><p>8.1</p><p>8.2</p></div>

</div>