原生HTML+CSS+JS实现Grid排版(1)

HTML+CSS+JS 41行1.25KB代码实现自适应GRID布局IE一格一行；

html5浏览器自动,比如600以内1歌一行，900以内两格一行，...

最后行两边对齐比如最后行只有一格则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>