naoki-sawada/grid.html

## grid.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, width=device-width, shrink-to-fit=no" />
  <style>
    body {
      display: grid;
      grid-template-columns: [menu] 25% [content] auto [end];
      grid-template-rows: [header] 10rem [main] auto [footer] 10rem [end];
    }

    header {
      /* grid-column: 2 / 3; */
      grid-area: header / content / main / end;
      background-color: blue;
      color: white;
    }

    aside {
      grid-column: 1 / 2;
      grid-row: 1 / 4;
      background-color: orange;
    }

    main {
      background-color: red;
      color: white;
    }

    footer {
      background-color: yellow;
    }
  </style>
  <title>Grid</title>
</head>

<body>
  <header>header</header>
  <aside>
    <ul>
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li><a href="#">d</a></li>
      <li><a href="#">e</a></li>
    </ul>
  </aside>
  <main>main</main>
  <footer>footer</footer>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, width=device-width, shrink-to-fit=no" />
	<style>
	body {
	display: grid;
	grid-template-columns: [menu] 25% [content] auto [end];
	grid-template-rows: [header] 10rem [main] auto [footer] 10rem [end];
	}

	header {
	/* grid-column: 2 / 3; */
	grid-area: header / content / main / end;
	background-color: blue;
	color: white;
	}

	aside {
	grid-column: 1 / 2;
	grid-row: 1 / 4;
	background-color: orange;
	}

	main {
	background-color: red;
	color: white;
	}

	footer {
	background-color: yellow;
	}
	</style>
	<title>Grid</title>
	</head>

	<body>
	<header>header</header>
	<aside>
	<ul>
	<li><a href="#">a</a></li>
	<li><a href="#">b</a></li>
	<li><a href="#">c</a></li>
	<li><a href="#">d</a></li>
	<li><a href="#">e</a></li>
	</ul>
	</aside>
	<main>main</main>
	<footer>footer</footer>
	</body>

	</html>