css - 通过推拉扩展 CSS 网格

Question

我使用 12 列的 CSS-Grid，现在我需要拉和推类。有人可以帮助我通过推拉类来扩展我的网格。 我有什么:

.row                                { margin:0 auto; width:1200px; overflow:hidden; }
.row .row                           { margin:0 -20px 0 -20px; width:auto; display:inline-block; }

.grid_1                             { width:60px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_2                             { width:160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_3                             { width:260px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_4                             { width:360px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_5                             { width:460px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }     
.grid_6                             { width:560px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_7                             { width:660px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_8                             { width:760px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_9                             { width:860px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_10                            { width:960px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_11                            { width:1060px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_12                            { width:1160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.offset_1                           { margin-left:120px; }
.offset_2                           { margin-left:220px; }
.offset_3                           { margin-left:320px; }
.offset_4                           { margin-left:420px; }
.offset_5                           { margin-left:520px; }
.offset_6                           { margin-left:620px; }
.offset_7                           { margin-left:720px; }
.offset_8                           { margin-left:820px; }
.offset_9                           { margin-left:920px; }
.offset_10                          { margin-left:1020px; }
.offset_11                          { margin-left:1120px; }

Answer 1

明白了。 所以如果有人需要。

    /* Push & Pull */
    .push_1                             { left: 100px;  position:relative; }
.push_2                             { left: 200px; position:relative; }
.push_3                             { left: 300px; position:relative; }
.push_4                             { left: 400px; position:relative; }
.push_5                             { left: 500px; position:relative; }
.push_6                             { left: 600px; position:relative; }
.push_7                             { left: 700px; position:relative; }
.push_8                             { left: 760px; position:relative; }
.push_9                             { left: 860px; position:relative; }
.push_10                            { left: 960px; position:relative; }
.push_11                            { left: 1100px; position:relative; }
.push_12                            { left: 1200px; position:relative; }

.pull_1                             { left: -100px;  position:relative; }
.pull_2                             { left: -200px; position:relative; }
.pull_3                             { left: -300px; position:relative; }
.pull_4                             { left: -400px; position:relative; }
.pull_5                             { left: -500px; position:relative; }
.pull_6                             { left: -600px; position:relative; }
.pull_7                             { left: -700px; position:relative; }
.pull_8                             { left: -800px; position:relative; }
.pull_9                             { left: -900px; position:relative; }
.pull_10                            { left: -1000px; position:relative; }
.pull_11                            { left: -1100px; position:relative; }
.pull_12                            { left: -1200px; position:relative; }