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>圣杯布局(grid版)</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body * {
  15.             background-color: chartreuse;
  16.         }
  17.         body {
  18.             display: grid;
  19.             grid-template-columns: 200px minmax(400px, 1fr) 200px;
  20.             grid-template-rows: 10em minmax(calc(100vh - 20em - 0.6em), 1fr) 10em;
  21.             gap: 0.3em;
  22.         }
  23.         header,
  24.         footer {
  25.             grid-column: span 3;
  26.         }
  27.     </style>
  28.     </head>
  29.     <body>
  30.         <header>页眉</header>
  31.         <aside>左侧</aside>
  32.         <main>主题</main>
  33.         <aside>右侧</aside>
  34.         <footer>页脚</footer>
  35.     </body>
  36. </html>