grid的相关应用

学习了grid相关语法之后，可能需要一些例子来说明其常见的应用场景。在这篇文章当中，我将举几个简单的例子加以说明。

类似于flex那几个例子，也是较为常见的使用场景。

水平/垂直居中

类似于flex，我们，我们可以通过设置justify-items与align-items的值为center，让仅有一个网格单元的容器内的网格项目在网格容器中水平垂直居中对齐，实现水平/垂直居中

image

  1. <div class="box">
  2.     <div class="content">我是子元素，我要垂直居中</div>
  3. </div>
  1. .box {
  2.     display: grid;
  3.     align-items: center;
  4.     justify-items: center;
  5.     height: 500px;
  6.     width: 500px;
  7.     background-color: green;
  8. }
  9. .content {
  10.     width: 200px;
  11.     height: 200px;
  12.     background-color: yellow;
  13.     line-height: 200px;
  14.     text-align: center;
  15. }

两栏/三栏布局

现在我们不仅可以利用flex，也可以使用grid，轻松实现页面布局中的常见问题：两栏/三栏布局。

image

  1. <div class="box box1">
  2.     <div class="left">left</div>
  3.     <div class="main">main</div>
  4. </div>
  5. <div class="box box2">
  6.     <div class="left">left</div>
  7.     <div class="main">main</div>
  8.     <div class="right">right</div>
  9. </div>
  1. .box {
  2.     display: grid;
  3.     height: 200px;
  4.     width: 100%;
  5.     margin-bottom: 30px;
  6.     grid-template-columns: 200px auto;
  7. }
  8. .box1 {
  9.     grid-template-columns: 200px auto;
  10. }
  11. .box2 {
  12.     grid-template-columns: 200px auto 100px;
  13. }
  14. .left {
  15.     background-color: yellow;
  16.     grid-area: 1/ 1/ 2/ 2;
  17. }
  18. .main {
  19.     background-color: green;
  20.     grid-area: 1/ 2/ 2/ 3;
  21. }
  22. .right {
  23.     background-color: blue;
  24.     grid-area: 1/ 3/ 2/ 4;
  25. }

等分宽高

等分宽高这种情况，认真看完grid的相关语法后都不用思考就能做的，这里就不做具体阐述了。

圣杯布局

使用grid也是十分容易就能实现圣杯布局了，而且具有良好的语义化。

image

  1. <div class="box">
  2.         <header>header</header>
  3.         <main>main</main>
  4.         <nav>nav</nav>
  5.         <aside>aside</aside>
  6.         <footer>footer</footer>
  7. </div>
  1. * {
  2.     margin:0;
  3.     padding: 0;
  4. }
  6. .box{
  7.     display: grid;
  8.     width: 100vw;
  9.     height: 100vh;
  10.     grid-template-columns:80px 1fr 1fr 1fr 80px;
  11.     grid-template-rows:80px 1fr 1fr 80px;
  12.     grid-template-areas:'title title title title title '
  13.                         'nav main main main aside'
  14.                         'nav main main main aside'
  15.                         'footer footer footer footer footer';
  16.     font-size: 30px;
  17.     text-align: center;
  18. }
  20. header{
  21.     grid-area:title;
  22.     background-color: blue;
  23. }
  24. nav{
  25.     grid-area:nav;
  26.     background-color: red;
  27. }
  29. main{
  30.     grid-area:main;
  31.     background-color: gray;
  32. }
  34. aside{
  35.     grid-area:aside;
  36.     background-color: yellow;
  37. }
  39. footer{
  40.     grid-area:footer;
  41.     background-color: green;
  42. }

这里就简单举了几个较为常见的例子加以说明。俗话说：纸上得来终觉浅，绝知此事要躬行。所有代码都是我个人亲手码的，在真正实践探索中慢慢也就能掌握了。

(全剧终)