HTML+CSS+JS 41 lines of 1.25KB code to implement adaptive GRID layout IE one grid per row;
HTML5 browser automatically, for example, one song per line within 600, two spaces per line within 900,...
The last row is aligned on both sides. For example, if the last row has only one space, the width will be 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>