利用 css grid 页面常规布局

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

 

HTML

?

1 2 3 4 5 6 7 8 9 10 11

<div class="grid-box">   <div class="item header"></div>   <div class="item header"></div>   <div class="item header"></div>   <div class="item sidebar"></div>   <div class="item main"></div>   <div class="item main"></div>   <div class="item footer"></div>   <div class="item footer"></div>   <div class="item footer"></div> </div>

CSS

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

.grid-box {   height: 100vh;   display: grid;   grid-template-columns: repeat(3, 33.3%);   grid-template-rows:  100px 1fr 100px;   grid-template-areas: 'header header header'                        'sidebar main main'                        'footer footer footer'; }   .item {   background-color: aquamarine;   border: 1px solid #eee;   margin: 0 10px 20px 10px;   margin-bottom: 20px;   counter-increment: items;   content: counter(items); }   .header {   grid-area: header; }   .main {   grid-area: main; }   .sidebar {   grid-area: sidebar; }   .footer {   grid-area: footer; }