通過gird布局實現div的響應式分布排列

目標：實現對于固定寬度的div盒子在頁面中自適應排布，并且最后一行的div盒子可以與前面的盒子對齊。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{display: grid;grid-template-columns: repeat(auto-fill, 300px); /* 自動填充，寬度固定300px*/justify-content: space-around; /* 兩端對齊 */gap:20px /* 間距為20px */}.items{width: 300px;height: 300px;background-color: skyblue;border: 1px solid black;}</style>
</head><script>
</script>
<body><div class="container"><div class="items">1111</div><div class="items">2222</div><div class="items">3333</div><div class="items">4444</div><div class="items">5555</div><div class="items">6666</div><div class="items">7777</div><div class="items">8888</div><div class="items">9999</div><div class="items">10101010</div><div class="items">11111111</div></div>
</body>
</html>

效果圖：瀏覽器窗口變化，盒子排布也會變動

圖一：
在這里插入圖片描述
圖二：

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/79348.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/79348.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/79348.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！