<ul class="wrap" id="mainList">
    <li class="l-card-title">
      <h1>九九乘法表</h1>
      <h2>MULTIPLICATION CHART</h2>
    </li>
    <li class="l-card">
      <ul class="l-card__wrap">
        <li class="l-card__title">2</li>
        <li>2x1=2</li>
        <li>2x2=2</li>
        <li>2x3=2</li>
        <li>2x4=2</li>
        <li>2x5=21</li>
        <li>2x6=2</li>
        <li>2x7=2</li>
        <li>2x8=2</li>
        <li>2x9=2</li>
      </ul>
    </li>
  </ul>

*{
  box-sizing: border-box;
}
@mixin medium {
  @media (max-width:1110px) {
    @content;
  }
}
@mixin sm {
  @media (max-width:730px) {
    @content;
  }
}
body{
  background-color: #F0F0F0;
}
.wrap{
  max-width: 1110px;
  width: 100%;
  margin: 32px auto;
  display: grid;
  grid-template-columns: repeat(3 , 350px);
  grid-template-rows: repeat(3 , 366px);
  gap: 40px 30px;
  font-family: 'Roboto','微軟正黑體';
  @include medium{
    max-width: 730px;
    grid-template-columns: repeat(2 , 350px);
  }
  @include sm{
    max-width: 350px;
    grid-template-columns: repeat(1 , 350px);
  }
}
// .wrap{
//   max-width: 1110px;
//   width: 100%;
//   margin: 32px auto;
//   display: flex;
//   justify-content: space-around;
//   flex-wrap: wrap;
//   font-family: 'Roboto','微軟正黑體';
//   >li{
//     width: 350px;
//     height: 366px;
//     margin: 0 0 30px 0;
//   }
// }
// .wrap{
//   max-width: 1140px;
//   width: 100%;
//   margin: 32px auto;
//   overflow: hidden;
//   >li{
//     width: 350px;
//     height: 366px;
//     float: left;
//     margin: 0 15px 40px 15px;
//   }
//   .row{
//     border: 1px solid #111;
//     width: 100%;
//     height: 100%;
//   }
// }
//顏色變數
$color-pri: #2EB738;

//九九乘法表標題欄
.l-card-title{
  text-align: center;
  color: $color-pri;
  position: relative;
  top: 0;
  bottom: 0;
  margin: auto;
  &::before,&::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: $color-pri;
  }
  &::before{
    top: -130px;
  }
  &::after{
    bottom: -130px;
  }
  h1{
    font-size: 56px;
    &::before,&::after{
      content: 'x';
      font-size: 24px;
      font-weight: 700;
      position: absolute;
      top: -142px;
      width: 1px;
      height: 1px;
      background-color: $color-pri;
    }
    &::before{
      left: -1.3em;
    }
    &::after{
      right: -0.9em;
    }
  }
  h2{
    font-size: 24px;
    &::before,&::after{
      content: 'x';
      font-size: 24px;
      position: absolute;
      bottom: -117px;
      width: 1px;
      height: 1px;
      background-color: $color-pri;
    }
    &::before{
      left: -1.3em;
    }
    &::after{
      right: -0.9em;
    }
  }
}

.l-card{
  width: 100%;
  height: 366px;
  background-color: #FFF;
  border-radius: 100px 0px 30px 0px;
  box-shadow: 0px 3px 10px #D8D8D8;
  .l-card__wrap{
    width: 100%;
    height: 100%;
    padding: 64px 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    li{
      // max-width: 118px;
      margin-right: 35px;
      flex: 1 1 33px;
      font-size: 24px;
      line-height: 33px;
      font-weight: 300;
      color: $color-pri;
      letter-spacing: .3em;
      display: inline-block;
      position: relative;
      margin-top: 6px;
    }
    .l-card__title{
      height: auto;
      padding-left: .1em;
      margin-top: 0;
      margin-right: 25px;
      font-size: 128px;
      line-height: 120px;
      font-weight: 900;
      text-shadow: 4px 3px 0px #F0F0F0;
    }
  }
}

let mainList = document.getElementById('mainList');
let chartNum = 8;
let strInner = '';
updateList();

function updateList() {
	//title
	let strOut = `<li class="l-card-title">
    	<h1>九九乘法表</h1>
    	<h2>MULTIPLICATION CHART</h2>
  	</li>`
	for (let i = 0; i < chartNum; i++) {
		innerList(i + 2)
		strOut += `<li class="l-card">
     					<ul class="l-card__wrap">
        					<li class="l-card__title">${i + 2}</li>
        					${strInner}
      					</ul>
    				</li>`
		strInner = '';
	}
	mainList.innerHTML = strOut;
}

function innerList(num) {
	for (let i = 0; i < 9; i++) {
		strInner += `<li>${num}x${i + 1}=${num * (i + 1)}</li>`
	}
}