使用Grid.css实现的多列弹性布局在线实例演示

很实用的一个布局CSS样式库，可以帮助快速搭建网页布局，基于网格（grid）布局技术。

css3, grid, layout, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3862
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* G R I D */

.container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    color: #f14f6b
}
.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}
@media (min-width: 400px) {
    .container {
        width: 85%;
        padding: 0;
    }
}
@media (min-width: 550px) {
    .container {
        width: 80%;
    }
    .column,
    .columns {
        margin-left: 4%;
    }
    .column:first-child,
    .columns:first-child {
        margin-left: 0;
    }
    .one.column,
    .one.columns {
        width: 4.66666666667%;
    }
    .two.columns {
        width: 13.3333333333%;
    }
    .three.columns {
        width: 22%;
    }
    .four.columns {
        width: 30.6666666667%;
    }
    .five.columns {
        width: 39.3333333333%;
    }
    .six.columns {
        width: 48%;
    }
    .seven.columns {
        width: 56.6666666667%;
    }
    .eight.columns {
        width: 65.3333333333%;
    }
    .nine.columns {
        width: 74.0%;
    }
    .ten.columns {
        width: 82.6666666667%;
    }
    .eleven.columns {
        width: 91.3333333333%;
    }
    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }
    /* Offsets */
    
    .offset-by-one.column,
    .offset-by-one.columns {
        margin-left: 8.66666666667%;
    }
    .offset-by-two.column,
    .offset-by-two.columns {
        margin-left: 17.3333333333%;
    }
    .offset-by-three.column,
    .offset-by-three.columns {
        margin-left: 26%;
    }
    .offset-by-four.column,
    .offset-by-four.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-five.column,
    .offset-by-five.columns {
        margin-left: 43.3333333333%;
    }
    .offset-by-six.column,
    .offset-by-six.columns {
        margin-left: 52%;
    }
    .offset-by-seven.column,
    .offset-by-seven.columns {
        margin-left: 60.6666666667%;
    }
    .offset-by-eight.column,
    .offset-by-eight.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-nine.column,
    .offset-by-nine.columns {
        margin-left: 78.0%;
    }
    .offset-by-ten.column,
    .offset-by-ten.columns {
        margin-left: 86.6666666667%;
    }
    .offset-by-eleven.column,
    .offset-by-eleven.columns {
        margin-left: 95.3333333333%;
    }
}
html {
    font-size: 65%;
    background-color: #4b405a;
}
body {
    width: 100%;
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: 400;
    font-family: monospace;
    color: #d4db91;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
header {
    color: #d4db91;
}
footer {
    color: #d4db91;
    text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 300;
    color: #d4db91
}
h1 {
    font-size: 4.0rem;
    line-height: 1.2;
    letter-spacing: -.1rem;
}
h2 {
    font-size: 3.6rem;
    line-height: 1.25;
    letter-spacing: -.1rem;
}
h3 {
    font-size: 3.0rem;
    line-height: 1.3;
    letter-spacing: -.1rem;
}
h4 {
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: -.08rem;
}
h5 {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: -.05rem;
}
h6 {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: center;
    padding-top: 2rem;
}
/* Larger than phablet */

@media (min-width: 550px) {
    h1 {
        font-size: 5.0rem;
    }
    h2 {
        font-size: 4.2rem;
    }
    h3 {
        font-size: 3.6rem;
    }
    h4 {
        font-size: 3.0rem;
    }
    h5 {
        font-size: 2.4rem;
    }
    h6 {
        font-size: 1.5rem;
    }
}
p {
    margin-top: 0;
}
a:not(.btn) {
    color: #d4db91;
    text-decoration: none;
}
a:not(.btn):hover {
    background-image: -webkit-linear-gradient(transparent, transparent 87.5%, #d4db91 87.5%);
    background-image: linear-gradient(transparent, transparent 87.5%, #d4db91 87.5%)
}
hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 5px solid #222;
}
.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}
@media (min-width: 400px) {} @media (min-width: 550px) {} @media (min-width: 750px) {} @media (min-width: 1000px) {} @media (min-width: 1200px) {}
/* Moving Squares */

.moving-squares {
    margin: 4em auto;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #4b405a;
    position: relative;
}
.square {
    position: absolute;
}
.square:first-of-type {
    background-color: #669999;
    -webkit-animation: bigsquare 8s 5 ease;
    animation: bigsquare 8s 5 ease;
}
.square:nth-of-type(2) {
    background-color: #CC6699;
    -webkit-animation: mediumsquare 4s reverse 5 ease;
    animation: mediumsquare 4s reverse 5 ease;
}
.square:last-of-type {
    background-color: #998099;
    -webkit-animation: smallsquare 10s 5 alternate;
    animation: smallsquare 10s 5 alternate;
}
@-webkit-keyframes smallsquare {
    0% {
        top: 90px;
        right: 90px;
        bottom: 70px;
        left: 70px;
    }
    12.5% {
        top: 70px;
        bottom: 70px;
    }
    25% {
        right: 90px;
        bottom: 90px;
    }
    37.5% {
        right: 70px;
        left: 70px;
    }
    50% {
        bottom: 90px;
        left: 90px;
    }
    62.5% {
        top: 70px;
        bottom: 70px;
    }
    75% {
        top: 90px;
        left: 90px;
    }
    87.5% {
        right: 70px;
        left: 70px;
    }
    100% {
        top: 90px;
        right: 90px;
        bottom: 70px;
        left: 70px;
    }
}
@keyframes smallsquare {
    0% {
        top: 90px;
        right: 90px;
        bottom: 70px;
        left: 70px;
    }
    12.5% {
        top: 70px;
        bottom: 70px;
    }
    25% {
        right: 90px;
        bottom: 90px;
    }
    37.5% {
        right: 70px;
        left: 70px;
    }
    50% {
        bottom: 90px;
        left: 90px;
    }
    62.5% {
        top: 70px;
        bottom: 70px;
    }
    75% {
        top: 90px;
        left: 90px;
    }
    87.5% {
        right: 70px;
        left: 70px;
    }
    100% {
        top: 90px;
        right: 90px;
        bottom: 70px;
        left: 70px;
    }
}
@-webkit-keyframes mediumsquare {
    0% {
        top: 110px;
        right: 110px;
        bottom: 40px;
        left: 40px;
    }
    12.5% {
        top: 40px;
        bottom: 40px;
    }
    25% {
        right: 110px;
        bottom: 110px;
    }
    37.5% {
        right: 40px;
        left: 40px;
    }
    50% {
        bottom: 110px;
        left: 110px;
    }
    62.5% {
        top: 40px;
        bottom: 40px;
    }
    75% {
        top: 110px;
        left: 110px;
    }
    87.5% {
        right: 40px;
        left: 40px;
    }
    100% {
        top: 110px;
        right: 110px;
        bottom: 40px;
        left: 40px;
    }
}
@keyframes mediumsquare {
    0% {
        top: 110px;
        right: 110px;
        bottom: 40px;
        left: 40px;
    }
    12.5% {
        top: 40px;
        bottom: 40px;
    }
    25% {
        right: 110px;
        bottom: 110px;
    }
    37.5% {
        right: 40px;
        left: 40px;
    }
    50% {
        bottom: 110px;
        left: 110px;
    }
    62.5% {
        top: 40px;
        bottom: 40px;
    }
    75% {
        top: 110px;
        left: 110px;
    }
    87.5% {
        right: 40px;
        left: 40px;
    }
    100% {
        top: 110px;
        right: 110px;
        bottom: 40px;
        left: 40px;
    }
}
@-webkit-keyframes bigsquare {
    0% {
        top: 140px;
        right: 140px;
        bottom: 0px;
        left: 0px;
    }
    12.5% {
        top: 0px;
        bottom: 0px;
    }
    25% {
        right: 140px;
        bottom: 140px;
    }
    37.5% {
        right: 0px;
        left: 0px;
    }
    50% {
        bottom: 140px;
        left: 140px;
    }
    62.5% {
        top: 0px;
        bottom: 0px;
    }
    75% {
        top: 140px;
        left: 140px;
    }
    87.5% {
        right: 0px;
        left: 0px;
    }
    100% {
        top: 140px;
        right: 140px;
        bottom: 0px;
        left: 0px;
    }
}
@keyframes bigsquare {
    0% {
        top: 140px;
        right: 140px;
        bottom: 0px;
        left: 0px;
    }
    12.5% {
        top: 0px;
        bottom: 0px;
    }
    25% {
        right: 140px;
        bottom: 140px;
    }
    37.5% {
        right: 0px;
        left: 0px;
    }
    50% {
        bottom: 140px;
        left: 140px;
    }
    62.5% {
        top: 0px;
        bottom: 0px;
    }
    75% {
        top: 140px;
        left: 140px;
    }
    87.5% {
        right: 0px;
        left: 0px;
    }
    100% {
        top: 140px;
        right: 140px;
        bottom: 0px;
        left: 0px;
    }
}

HTML

</div>
        </div>
    </div>
</header>

<main>
    <div class="container">
        <div class="row">
            <div class="one column">One</div>
            <div class="eleven columns">Eleven</div>
        </div>

<div class="row">
            <div class="three columns">Three</div>
            <div class="nine columns">Nine</div>
        </div>

<div class="row">
            <div class="four columns">Four</div>
            <div class="eight columns">Eight</div>
        </div>

<div class="row">
            <div class="five columns">Five</div>
            <div class="seven columns">Seven</div>
        </div>

<div class="row">
            <div class="seven columns">Seven</div>
            <div class="five columns">Five</div>
        </div>

<div class="row">
            <div class="eight columns">Eight</div>
            <div class="four columns">Four</div>
        </div>

<div class="row">
            <div class="nine columns">Nine</div>
            <div class="three columns">Three</div>
        </div>

<div class="row">
            <div class="eleven columns">Eleven</div>
            <div class="one column">One</div>
        </div>

<div class="row">
            <div class="three columns">Three</div>
            <div class="three columns">Three</div>
            <div class="three columns">Three</div>
            <div class="three columns">Three</div>
        </div>

<div calss="row">
            <div class="twelve columns">Twelve</div>
        </div>

<div calss="row">
            <div class="two columns">Two</div>
            <div class="eight columns">Eight</div>
            <div class="two columns">Two</div>
        </div>

<div calss="row">
            <div class="three columns">Three</div>
            <div class="six columns">Six</div>
            <div class="three columns">Three</div>
        </div>

</main>

<footer>
    <div class="container">
        <div class="row">
            <div class="twelve columns">
                <h6><a href="#">friend links</a></h6>
            </div>
        </div>
    </div>
</footer>

很实用的一个布局CSS样式库，可以帮助快速搭建网页布局，基于网格（grid）布局技术。

css3, grid, layout, template

编辑器支持Emmet

快捷键

很实用的一个布局CSS样式库，可以帮助快速搭建网页布局，基于网格（grid）布局技术。

css3, grid, layout, template

使用aos.js、css弹性框和网格布局实现的一款毛纺织品在线营销页面（响应式设计）

使用Masonry.js实现的弹性瀑布流布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：