CSS 栅格系统

CSS:

.grid
{
  margin-right: auto;
  margin-left:  auto;
}

.grid-row
{
  width: 100%;
}

.grid-1,  .grid-2,  .grid-3,
.grid-4,  .grid-5,  .grid-6,
.grid-7,  .grid-8,  .grid-9,
.grid-10, .grid-11, .grid-12
{
  position:   relative;
  min-height: 1px;
  float:      left;
  word-wrap:  break-word;
}

.grid-1  { width: 8.3%  }
.grid-2  { width: 16.6% }
.grid-3  { width: 25%   }
.grid-4  { width: 33.3% }
.grid-5  { width: 41.6% }
.grid-6  { width: 50%   }
.grid-7  { width: 58.3% }
.grid-8  { width: 66.6% }
.grid-9  { width: 75%   }
.grid-10 { width: 83.3% }
.grid-11 { width: 91.6% }
.grid-12 { width: 100%  }

.grid:before,
.grid:after,
.grid-row:before,
.grid-row:after
{
  content: " ";
  display: table;
}

.grid:after,
.grid-row:after
{
  clear: both;
}

HTML:

<div class="grid">
    <div class="grid-row">
        <div class="grid-3">3</div>
        <div class="grid-3">3</div>
        <div class="grid-3">3</div>
        <div class="grid-3">3</div>
    </div>
</div>

 

转载于:https://www.cnblogs.com/noorty/p/css-grid.html