<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
</head>
<body>
  <header>this is header</header>
  <div class="container">
    <div class="center column">
      <h1>center</h1>
    </div>
    <div class="left column">left</div>
    <div class="right column">right</div>
  </div>
  <footer>this is footer</footer>
  
  <hr>
  
  <div class="container2">
    <div class="item item-header">header</div>
    <div class="item item-center">center</div>
    <div class="item item-left">left</div>
    <div class="item item-right">right</div>
    <div class="item item-footer">footer</div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  text-align: center;
}
body {
  min-width: 550px;
}
header{
  background: blueviolet;
}
.container {
  padding: 0 200px;
}
.column {
  position: relative;
  float: left;
}
.center {
  background: red;
  width: 100%;
}
.left{
  background: green;
  width: 200px;
  right: 200px;
  margin-left: -100%;
}
.right {
  width: 200px;
  margin-right: -100%;
  background: grey;
}
footer{
  background: pink;
  clear: both;
}
/*****************************************************/
hr {
  margin: 2em 0;
}
/*****************************************************/
.container2 {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas: "header header header"
                "left center right"
                "footer footer footer";
}
.item {
  height: 100px;
}
.item-header {
  grid-column: span 3;
  background: grey;
}
.item-center {
  grid-area: center;
  background: blue;
}
.item-left {
  width: 200px;
  background: yellow;
}
.item-right {
  width: 200px;
  background: yellowgreen;
}
.item-footer {
  background: silver;
  grid-column: span 3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.