神刀安全网

Responsive CSS Grid

Responsive CSS Grid

A super-lightweight, responsive, 8-column grid based on box-sizing .

Classes

These CSS classes for column sizes are specific to the total width of <div class="container"> :

class column width
.col-1-2 half
.col-2-3 two-thirds
.col-1-3 one-third
.col-1-4 one-fourth
.col-1-8 one-eighth

Markup

<div class="container">   <div class="row clearfix">     <div class="col-2-3"> <!-- column is 2/3 the total width -->       Your content     </div>     <div class="col-1-3"> <!-- column is 1/3 the total width -->       Your content     </div>   </div>   ...

Live Example

Responsive CSS grid .

Browser support

The responsive CSS grid works in the latest versions of:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Edge
  • Internet Explorer
  • iOS Safari
  • Chrome for Android

The above list is non-exhaustive. This grid works perfectly with any browser that supports box-sizing , including IE8+.

License

The MIT License (MIT)

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Responsive CSS Grid

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮