場景：專案開發中遇到如下問題，從後端請求活動資料，陣列長度未知，每乙個活動以卡片格式展示，展示格式如下：
剛看到需求，我選擇使用flex布局進行布局。建立如下demo
css:
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 50px;
}.box
.box div
html:
class="存在問題：當最後一行不是乙個「卡片」時，布局會出現問題，如下圖">
class="
box">
box1
class="
box">
box2
class="
box">
box3
class="
box">
box4
嘗試了幾種解決方法，無果，最終查到可使用css3的grid布局。
修改css
display: grid;
/*使用grid
*//*
grid-template-columns屬性定義每一列的列寬； fr為方便表示比例關係的一種關鍵字
*/grid-template-columns: 1fr 1fr 1fr;
padding: 50px;
}展示如圖：
這樣就可以結合angularjs的ng-repeat迴圈從後端請求過來的陣列，進行資料填充，無需考慮活動資料多少，進行資料展示啦！
布局管理之Grid布局
tkinter grid常用選項 column 指定將元件放入哪列，第一列的索引為 0。columnspan 指定元件橫跨多少列。row 指定元件放入哪行，第一行的索引為 0。rowspan 指定元件橫跨多少行。sticky 對齊方式，類似 pack 方法的 anchor 選項，同樣支援 n e s...
css網格布局Grid
記錄一下grid布局的應用，因為在日常工作中，運用element ui的關係，導致grid布局並不是運用特別多，本身這類ui就已經在實現上運用到了，但是還是需要知道如何使用。設定成grid，如同設定flex布局一般。只需要將par grid的display屬性設定成grid即可。這樣乙個簡單的網格布...
grid 布局的使用
grid 布局的使用 css 網格布局，是一種二維布局系統。瀏覽器支援情況 老舊瀏覽器不支援，概念 網格容器。元素應用dispalay grid,它是所有網格項的父元素。網格項。網格容器的子元素。網格線。組成網格線的分界線，他們可以是列網格線，也可以是行網格線 網格軌道。兩個相鄰的網格線之間為網格軌...