歡迎關注路條編程網站，通過學習 CSS Grid 網格布局這一系列文章，你將會逐步掌握網格布局的容器和項目、行和列、單元格、網絡線等相關的知識。
使用 place-content 屬性指定網格元素水平、垂直方向元素分布方式。place-content 屬性是 align-content 屬性和 justify-content 屬性的合併簡寫形式。語法如下所示：<style type="text/css">.container { place-content: <align-content> <justify-content>?; }</style>以上代碼順序是 align-content 在前，justify-content 在後。如果省略第二個值，瀏覽器就會假定第二個值等於第一個值。注意：Edge15 及其之前版本尚不支持 place-content 屬性（未實測），因此，如果有兼容性顧慮，建議還是分開書寫。調整頁面框架模塊 14 ，為了看出效果，將模塊 14 的樣式 ant-col-xl-6 調整為 ant-col-xl-12 ，佔整個頁面框架寬度的一半。增加一個 3 行 3 列容器，容器中包含 9 個項目。本示例使用水平垂直方向元素分布方式，容器主樣式類為 .grid-align-content-main .place-content-space，定義 3 列寬度分別為 100px、50px、100px, 定義 3 行高度分別為 80px、auto、80px。列間距為 10px, 行間距為 15px。調整後的樣式代碼如下所示：<style type="text/css"> .place-content-space { place-content: space-around space-between; }</style><article class="article ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6"> <div class="card"> <div class="container grid-gap-main place-content-space "> <div class="box item1">1</div> <div class="box item2">2</div> <div class="box item3">3</div> <div class="box item4">4</div> <div class="box item5">5</div> <div class="box item6">6</div> <div class="box item7">7</div> <div class="box item8">8</div> <div class="box item9">9</div> </div> </div></article>重要提示：示例效果預覽，請訪問 https://www.icoderoad.com , 完整代碼查看及下載，請訪問 https://github.com/icoderoad/demo。
今天就講到這裡，如果有問題需要諮詢，大家可以直接留言或掃下方二維碼關注公眾號。也可以添加 happyzjp 微信受邀加入學習社群，我們會盡力為你解答。
作者：路條編程（轉載請獲本公眾號授權，並註明作者與出處）