@charset "UTF-8";
/* Scss Document */
body {
  padding: 0;
  margin: 0; }

h2 {
  margin-top: 60px;
  margin-left: 10px; }

.container {
  background: #eee;
  display: grid;
  /*grid-template-rows: 80px 80px 80px;←縦列
  grid-template-columns:  80px 80px 80px;←横列
  ↓省略
  grid-template: 80px 80px 80px / 80px 80px 80px;
  ↓省略*/
  grid-template: repeat(3, 80px)/repeat(3, 80px);
  /*grid-template: repeat(3, 80px)/repeat(auto-fill, 80px);←「auto-fill」並べられるだけ並べる*/
  margin-bottom: 40px; }

.item-1 {
  background: #8a0f8a; }

.item-2 {
  background: #b814b8; }

.item-3 {
  background: #e61ae6; }

.item-4 {
  background: #0f618a; }

.item-5 {
  background: #1481b8; }

.item-6 {
  background: #1aa2e6; }

.item-7 {
  background: #388a0f; }

.item-8 {
  background: #4bb814; }

.item-9 {
  background: #5ee61a; }

/*frを使う*/
.container2 {
  background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 1fr 2fr;
  /*grid-row-gap: 10px;
  grid-column-gap: 10px;
  ↓省略
  grid-gap: 10px 10px;
  ↓省略*/
  grid-gap: 10px; }

.item2-1 {
  background: #8a0f8a; }

.item2-2 {
  background: #b814b8; }

.item2-3 {
  background: #e61ae6; }

.item2-4 {
  background: #0f618a; }

.item2-5 {
  background: #1481b8; }

.item2-6 {
  background: #1aa2e6; }

.item2-7 {
  background: #388a0f; }

.item2-8 {
  background: #4bb814; }

.item2-9 {
  background: #5ee61a; }

/*要素の配置*/
.container3 {
  background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px 80px;
  grid-template-columns: [item3-8-start] 80px 80px [item3-8-end] 80px; }

.item3-1 {
  background: #8a0f8a;
  /*縦方向3行目と4行目の間に要素を配置する
  grid-row-start: 3;
  grid-row-end: 4;
  ↓省略
  grid-row: 3 / 4;
  ↓省略
  grid-row: 3 / span 1;←3行目から1つぶん
  grid-row: 3;*/
  /*横方向2列目から2列分のスペースに配置する
  grid-column: 2 / 4;
  grid-column: 2 / span 2;*/
  /*すべて省略*/
  grid-area: 3 / 2 / 4 / 4; }

.item3-2 {
  background: #b814b8; }

.item3-3 {
  background: #e61ae6; }

.item3-4 {
  background: #0f618a;
  grid-row: 1 / 3;
  grid-column: -1 / -2; }

.item3-5 {
  background: #1481b8; }

.item3-6 {
  background: #1aa2e6; }

.item3-7 {
  background: #388a0f; }

.item3-8 {
  background: #4bb814;
  grid-column: item3-8-start / item3-8-end; }

.item3-9 {
  background: #5ee61a; }

/*エリアを登録して配置*/
.container4 {
  margin: 20px;
  background: #eee;
  display: grid;
  /*grid-template-rows: 80px 80px 80px;
  grid-template-columns: 2fr 2fr 1fr;
  grid-template-areas: 
  	"header header header"
  	"main   main   sidebar"
  	"footer footer footer";
  ↓省略*/
  grid-template: "header header header" 80px "main   main   sidebar" 80px "footer footer footer" 80px / 2fr 2fr 1fr; }

.item4-1 {
  background: #8a0f8a;
  grid-area: header; }

.item4-2 {
  background: #b814b8;
  grid-area: main; }

.item4-3 {
  background: #e61ae6;
  grid-area: sidebar; }

.item4-4 {
  background: #0f618a;
  grid-area: footer; }

/*自動的に要素を配置してみよう*/
.container5 {
  background: #eee;
  display: grid;
  grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;
  grid-auto-flow: dense column;
  grid-auto-rows: 80px;
  grid-auto-columns: 80px; }

.item5-1 {
  background: #8a0f8a; }

.item5-2 {
  background: #b814b8;
  grid-row: span 2;
  grid-column: span 1; }

.item5-3 {
  background: #e61ae6;
  grid-row: span 1;
  grid-column: span 2; }

.item5-4 {
  background: #0f618a; }

.item5-5 {
  background: #1481b8; }

.item5-6 {
  background: #1aa2e6; }

.item5-7 {
  background: #388a0f; }

.item5-8 {
  background: #4bb814; }

.item5-9 {
  background: #5ee61a; }

/*グリッドの位置揃えを操作してみよう*/
.container6 {
  background: #eee;
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-rows: 80px 80px 80px;
  grid-template-columns: 80px 80px 80px;
  justify-content: space-around;
  align-items: center; }

.item6-1 {
  background: #8a0f8a;
  padding: 10px;
  justify-self: center;
  align-self: center; }

.item6-2 {
  background: #b814b8;
  padding: 10px; }

.item6-3 {
  background: #e61ae6;
  padding: 10px; }

.item6-4 {
  background: #0f618a;
  padding: 10px; }

.item6-5 {
  background: #1481b8;
  padding: 10px; }

.item6-6 {
  background: #1aa2e6;
  padding: 10px; }

.item6-7 {
  background: #388a0f;
  padding: 10px; }

.item6-8 {
  background: #4bb814;
  padding: 10px; }

.item6-9 {
  background: #5ee61a;
  padding: 10px; }

/*レスポンシブデザインを実装しよう*/
.container7 {
  background: #eee;
  display: grid;
  grid-template: "header" 50px "main" 50px "sidebar" 50px "footer" 50px / 100%; }

.item7-1 {
  background: #8a0f8a;
  grid-area: footer; }

.item7-2 {
  background: #b814b8;
  grid-area: header; }

.item7-3 {
  background: #e61ae6;
  grid-area: main; }

.item7-4 {
  background: #0f618a;
  grid-area: sidebar; }

@media (min-width: 570px) {
  .container7 {
    grid-template: "header header" 50px "main sidebar" 50px "footer footer" 50px / 1fr 200px; } }