Rolf B: Firefox vs chrome / CSS grid

Beitrag lesen

problematische Seite

Hallo Stefan,

eigentlich verstehe ich es auch nicht. Chrome macht es meiner Meinung nach richtig, und der Fuchs zieht das Grid zu groß.

Es KÖNNTE hieran liegen:

Du schreibst im Forum dies:

.sideleft {
     padding: 10px;
     grid-column: span 1;
     grid-row: span 4;
  }
    
    
    .sideright {
     padding: 10px;
     grid-column: span ;
     grid-row: span 4;
  }

aber praktisch hast Du im CSS grid-row: span 6; stehen. Das prpduziert 2 zusätzliche Grid-Zeilen, die von grid-template-rows nicht abgedeckt sind.

Für .sideright solltest Du grid-column: -2 / -1 angeben. Also von der vorletzten Grid-Spaltenlinie bis zur letzten (Spaltenlinien befinden sich am Rand des Grids und zwischen den Spalten).

Für beide .sideXXX solltest Du grid-row: 1 / span 4 angeben, damit sie auch wirklich oben ansetzen.

Aber das erklärt es noch nicht wirklich. Wenn ich mit jsfiddle in Chrome und Fuchs ein ähnliches Grid aufbaue, stimmen die Maße überein. Allerdings habe ich da Platzhalter drin und keine Bilder.

Rolf

--
sumpsi - posui - obstruxi