grid布局
加在父元素上的屬性
grid-template-columns/grid-template-rows
定義元素的行或列的寬高 如果父元素被等分成了9等分，則，不管有多少個子元素，都顯示9等分 grid-template-columns: 33% 33% 33%;可以寫成grid-template-columns:repeat(3, 33%);| .container { width: 200px; height: 200px; display: grid; background-color: coral; margin: 10px;}.container .item { border: 1px solid #ccc; background-color: chocolate;}.container1 { grid-template-columns: 33% 33% 33%; grid-template-rows: 33% 33% 33%;} |
grid-template-areas
父元素的grid-template-areas配合子元素的grid-area定義網格區域 一個句點表示一個空的網格單元| .container { width: 200px; height: 200px; display: grid; background-color: coral; margin: 10px;}.container .item { border: 1px solid #ccc; background-color: chocolate;}.container2 { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "header header . footer" "main main . sidebar" "main main . sidebar";}.container2 .item-1 { grid-area: header;}.container2 .item-2 { grid-area: main;}.container2 .item-3 { grid-area: sidebar;}.container2 .item-4 { grid-area: footer;} |
| <div class="container container2"> <div class="item item-1">header</div> <div class="item item-2">main</div> <div class="item item-3">sidebar</div> <div class="item item-4">footer</div></div> |
grid-column-gap/grid-row-gap/grip-gap
指網格線的大小，也可以說是網格子項之間的間距| .container { width: 200px; height: 200px; display: grid; background-color: coral; margin: 10px;}.container .item { border: 1px solid #ccc; background-color: chocolate;}.container3 { grid-template-columns: repeat(3, 30%); grid-template-rows: repeat(3, 30%); grid-column-gap: 2%; grid-row-gap: 2%;} |
| <div class="container container3"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> <div class="item item-4"></div> <div class="item item-5"></div> <div class="item item-6"></div> <div class="item item-7"></div> <div class="item item-8"></div> <div class="item item-9"></div></div> |
