@opensig/opendesign/es/grid/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.o-flex {
  --flex-gap-x: 0px;
  --flex-gap-y: 0px;
}

.o-row {
  display: flex;
  --col-gap-x: calc(var(--row-gap-x) / 2);
  --col-gap-y: var(--row-gap-y);
  --row-shift-x: calc(-1 * var(--col-gap-x));
  --row-shift-y: calc(-1 * var(--col-gap-y));
  margin-left: var(--row-shift-x);
  margin-right: var(--row-shift-x);
  margin-bottom: var(--row-shift-y);
}
.o-row > * {
  padding-left: var(--col-gap-x);
  padding-right: var(--col-gap-x);
  margin-bottom: var(--col-gap-y);
  flex: 1 0 auto;
}

.o-col {
  flex: var(--col-flex);
}

@media (max-width: 1440px) {
  .o-row-laptop {
    --col-gap-x: calc(var(--row-laptop-gap-x) / 2);
    --col-gap-y: var(--row-laptop-gap-y);
  }
  .o-col-laptop {
    flex: var(--col-laptop-flex);
  }
}
@media (max-width: 1200px) {
  .o-row-pad {
    --col-gap-x: calc(var(--row-pad-gap-x) / 2);
    --col-gap-y: var(--row-pad-gap-y);
  }
  .o-col-pad {
    flex: var(--col-pad-flex);
  }
}
@media (max-width: 840px) {
  .o-row-pad-v {
    --col-gap-x: calc(var(--row-pad-v-gap-x) / 2);
    --col-gap-y: var(--row-pad-v-gap-y);
  }
  .o-col-pad-v {
    flex: var(--col-pad-v-flex);
  }
}
@media (max-width: 600px) {
  .o-row-phone {
    --col-gap-x: calc(var(--row-phone-gap-x) / 2);
    --col-gap-y: var(--row-phone-gap-y);
  }
  .o-col-phone {
    flex: var(--col-phone-flex);
  }
}