1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Gird布局实战（圣杯布局）</title>
  8. </head>
  9. <body>
  10.     <header>页眉</header>
  11.     <aside>左侧</aside>
  12.     <main>主体</main>
  13.     <aside>右侧</aside>
  14.     <footer>页脚</footer>
  16.     <style>
  17.         *{
  18.             padding:0;
  19.             margin:0;
  20.             box-sizing: border-box;
  21.         }
  23.         body *{
  24.             background-color: lightgreen;
  25.         }
  27.         body {
  28.             display: grid;
  30.             /* 3行3列 */
  31.             /* minmax(400px,1fr) 中间响应式，两边固定 */
  32.             grid-template-columns: 200px minmax(400px,1fr) 200px;
  34.             /* minmax(clac(100vh - 6em - 0.6em),1fr)  */
  36.             grid-template-rows: 3em minmax(calc(100vh - 6em - 0.6em),1fr) 3em;
  37.             gap: 0.3em;
  38.             place-content: center;
  39.         }
  41.        header,
  42.        footer{
  43.            grid-column: span 3;
  44.        }
  48.     </style>
  49. </body>
  50. </html>