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

最新推荐文章于 2023-12-25 00:49:16 发布

YUJIANYUE

最新推荐文章于 2023-12-25 00:49:16 发布

阅读量163

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/YUJIANYUE/article/details/131409661

版权

本文展示了如何使用HTML、CSS和JavaScript实现一个自适应的GRID布局，布局会根据屏幕宽度自动调整，如在600px内显示一列，在900px内显示两列等，并确保最后一行元素两侧对齐。代码利用了Flexbox和媒体查询来实现跨浏览器兼容性，包括IE。

摘要由CSDN通过智能技术生成

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>