栅格布局

Flex

使用 Flex 实现栅格布局

<div class="wrapper">
  <div class="grid">
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
    <div class="column">1 of 12</div>
  </div>

  <div class="grid">
    <div class="column">1 of 6</div>
    <div class="column">1 of 6</div>
    <div class="column">1 of 6</div>
    <div class="column">1 of 6</div>
    <div class="column">1 of 6</div>
    <div class="column">1 of 6</div>
  </div>

  <div class="grid">
    <div class="column">1 of 4</div>
    <div class="column">1 of 4</div>
    <div class="column">1 of 4</div>
    <div class="column">1 of 4</div>
  </div>

  <div class="grid">
    <div class="column">1 of 3</div>
    <div class="column">1 of 3</div>
    <div class="column">1 of 3</div>
  </div>

  <div class="grid">
    <div class="column">1 of 2</div>
    <div class="column">1 of 3</div>
  </div>
</div>

.wrapper {
  width: 100%;
  display: grid;
  gap: 4px;
}

.grid {
  display: flex;
  gap: 2px;
}

.column {
  flex: 1 1 0%;
  min-width: 0;
}

.column {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 36px;
  padding: 4px 6px;
  color: #557;
  white-space: nowrap;
  font-weight: 500;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.15);
  border-radius: 2px;
  box-shadow: 0 0 0.12em 0.012em rgb(0 0 0 / 0.25);
  background-color: #3eaf7c;
}

Grid

使用 Grid 实现栅格布局

<div class="wrapper">
  <div class="column">span 12</div>

  <div class="column">span 3</div>
  <div class="column">span 3</div>
  <div class="column">span 3</div>
  <div class="column">span 3</div>

  <div class="column">span 4</div>
  <div class="column">span 4</div>
  <div class="column">span 4</div>

  <div class="column">span 6</div>
  <div class="column">span 6</div>

  <div class="column">span 2</div>
  <div class="column">span 8</div>
  <div class="column">span 2</div>

  <div class="column">span 12</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 4px;
  row-gap: 4px;
  grid-auto-flow: dense;
}

.column:nth-child(1) {
  grid-column: 1 / span 12;
}

/* 合并三列 */
.column:nth-child(2) {
  grid-column: 1 / span 3;
}

.column:nth-child(3) {
  grid-column: 4 / span 3;
}

.column:nth-child(4) {
  grid-column: 7 / span 3;
}

.column:nth-child(5) {
  grid-column: 10 / span 3;
}

/* 合并四列 */
.column:nth-child(6) {
  grid-column: 1 / span 4;
}

.column:nth-child(7) {
  grid-column: 5 / span 4;
}

.column:nth-child(8) {
  grid-column: 9 / span 4;
}

.column:nth-child(9) {
  grid-column: 1 / span 6;
}

.column:nth-child(10) {
  grid-column: 7 / span 6;
}

.column:nth-child(11) {
  grid-column: 1 / span 2;
}

.column:nth-child(12) {
  grid-column: 3 / span 8;
}

.column:nth-child(13) {
  grid-column: 11 / span 2;
}

.column:nth-child(14) {
  grid-column: 1 / span 12;
}

.column {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 36px;
  padding: 4px 6px;
  color: #557;
  white-space: nowrap;
  font-weight: 500;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.15);
  border-radius: 2px;
  box-shadow: 0 0 0.12em 0.012em rgb(0 0 0 / 0.25);
  background-color: #3eaf7c;
}

使用 less 生成栅格系统

/* 使用 less 生成栅格系统 */

@media screen and (max-width: 768px) {
  /*此处设置生成列数*/
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}

@media screen and (min-width: 768px) {
  /*此处设置生成列数*/
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}

div[class^='column-xs-'] {
  float: left;
}

div[class^='column-sm-'] {
  float: left;
}

/* 生成的 CSS 代码 */

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}

@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }
  .column-sm-12 {  width: 100%;  }
}

div[class^="column-xs-"] {
  float: left;
}

div[class^="column-sm-"] {
  float: left;
}