html 响应式网格

Posted 2021-05-11

@mixin col($width) {
  float: left;
  padding: 15px;
  width: $width + '%';
  border: 1px solid green;
  box-sizing: border-box;
}

.col-1 { @include col(100 / 12);}

.col-2 { @include col(100 / 6);}

.col-3 { @include col(100 / 4);}

.col-4 { @include col(100 / 3);}

.col-5 { @include col(100 * 5 / 12);}

.col-8 { @include col(100 * 2 / 3);}

.col-9 { @include col(100 * 3 / 4);}

.col-10 { @include col(100 * 5 / 6);}

.col-11 { @include col(100 * 11 / 12);}

.col-12 { @include col(100);}

<div class="col-12">
  <h1>Header</h1>
</div>

<div class="col-3">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</div>

<div class="col-9">
  <h1>Main Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptates assumenda omnis tempore molestias soluta, illum dolore eum, velit voluptas, reprehenderit quos id magnam temporibus officia labore fugit nisi aut.</p>
  
  <div class="col-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illo dolorum blanditiis
  </div>
  <div class="col-4">
    Lorem ipsum de soluta cupiditate dolorum ipsam. Magni reiciendis doloremque doloribus.
  </div>
   <div class="col-4">
    Lorem ipsum dolor sit audi eius assumenda illo rerum explicabo ab harum!
  </div>
</div>