add layout holy grail

@@ -4,8 +4,8 @@ import { Row, Col } from 'antd';
 export default () => {
   return (
     <Row>
-      <Col span={12}>INSERT_BLOCK_PLACEHOLDER:Col 12</Col>
-      <Col span={12}>INSERT_BLOCK_PLACEHOLDER:Col 12</Col>
+      <Col span={12} style={{ minHeight: '20px', background: '#fecccc' }}>INSERT_BLOCK_PLACEHOLDER:Col 12</Col>
+      <Col span={12} style={{ minHeight: '20px', background: '#82caff' }}>INSERT_BLOCK_PLACEHOLDER:Col 12</Col>
     </Row>
   );
 }

+{
+  "name": "圣杯布局",
+  "description": "包含简单的响应式。",
+  "block": {
+    "category": "布局"
+  }
+}

+import React from 'react';
+import styles from './index.less';
+
+export default function() {
+  return (
+    <div className={styles.wrapper}>
+      <header>INSERT_BLOCK_PLACEHOLDER:HEADER</header>
+      <div className={styles.body}>
+        <main>INSERT_BLOCK_PLACEHOLDER:CONTENT</main>
+        <nav>INSERT_BLOCK_PLACEHOLDER:NAV</nav>
+        <aside>INSERT_BLOCK_PLACEHOLDER:ASIDE</aside>
+      </div>
+      <footer>INSERT_BLOCK_PLACEHOLDER:FOOTER</footer>
+    </div>
+  );
+}

+
+.wrapper {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+
+  header, footer {
+    background: #82caff;
+    flex: 0 0 6em;
+  }
+}
+
+.body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  main {
+    flex: 1;
+    background: #fecccc;
+  }
+  aside, nav {
+    flex: 0 0 12em;
+    background: #c9c;
+  }
+  nav {
+    order: -1;
+  }
+}
+
+@media (min-width: 768px) {
+  .body {
+    flex-direction: row;
+  }
+}