@gap: 10px;

.grid {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: @gap/2;
  &>* {
    box-sizing: border-box;
    margin: @gap/2;
  }
  .full {
    flex: 0 0 calc(100% - @gap);
  }
  .half {
    flex: 0 0 calc(50% - @gap);
   }
  .third {
    flex: 0 0 calc(33.33333% - @gap);
  }
  .two-third {
    flex: 0 0 calc(66.66666% - @gap);
  }
  .fourth {
    flex: 0 0 calc(25% - @gap);
  }
}

//响应式正方形，和本主题无关
.square-box{
    position: relative;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


//其他与本主题无关的样式
body{
  padding:10vh;
}
div{
  min-height:40px;
  text-indent:1em;
  line-height:40px;
}
.grid{
  background-color: #eee;
}
.grid>*{
    background-color: gold;
}