HTML+CSS+JS 41 Zeilen mit 1,25 KB Code zur Implementierung des adaptiven GRID-Layouts, dh ein Raster pro Zeile;
HTML5-Browser automatisch, zum Beispiel ein Lied pro Zeile innerhalb von 600, zwei Leerzeichen pro Zeile innerhalb von 900, ...
Die letzte Zeile ist auf beiden Seiten ausgerichtet. Wenn die letzte Zeile beispielsweise nur ein Leerzeichen enthält, beträgt die Breite 100 %.
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
</div>
<style>
*{line-height:180%;}
.grid {display: flex;flex-wrap: wrap;margin:-5px;padding:8px 5px;background-color: #ddd;}
.grid-item {flex-grow: 1;min-width: 300px;margin:3px;background-color: #ccc;}
@media screen and (min-width: 600px) {
.grid-item {flex-basis: 50%;}
}
@media screen and (min-width: 900px) {
.grid-item {flex-basis: calc(100% / 3);}
}
@media screen and (min-width: 1200px) {
.grid-item {flex-basis: calc(100% / 4);}
}
</style>
<Script>
var grid = document.querySelector('.grid');
var gridItems = document.querySelectorAll('.grid-item');
function resizeGrid() {
var gridWidth = grid.offsetWidth;
var gridItemWidth = gridItems[0].offsetWidth;
var gridColumns = Math.floor(gridWidth / gridItemWidth);
grid.style.gridTemplateColumns = 'repeat(' + gridColumns + ', 1fr)';
}
resizeGrid();
window.addEventListener('resize', function() {
resizeGrid();
});
</Script>