Grd-基于Flexbox的CSS网格系统框架

Grd-基于Flexbox的CSS网格系统框架

A CSS grid framework using Flexbox.

Simple: Provides just 2 base classes Grid and Cell and some modifiers.Light-weight: Only 501 bytes (Gzipped).Flexible: Easy to use Flexbox features.

Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).

Installation

# via npm$ npm install grd# via bower$ bower install grd

Usage

Grid modifiers

To align items with align-items-top: To top-middle: To middle-bottom: To bottom-stretch: Stretch items-baseline: To baselineTo layout contents with justify-content-left: To left-center: To center-right: To right-between: Add spaces between items-around: Add spaces around items

Cell modifiers

-fill: Set item width to left width of parent-1of12: Set item width to 8.3% of parent-2of12: Set item width to 16.7% of parent-3of12: Set item width to 25% of parent-4of12: Set item width to 33% of parent-5of12: Set item width to 41.7% of parent-6of12: Set item width to 50% of parent-7of12: Set item width to 58.3% of parent-8of12: Set item width to 66.7% of parent-9of12: Set item width to 75% of parent-10of12: Set item width to 83.3% of parent-11of12: Set item width to 91.7% of parent-12of12: Set item width to 100% of parent

License

MIT: http://1000ch.mit-license.org

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。