我使用带有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; }
答案 0 :(得分：0)
知道了。 所以，如果有人需要。
/* 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; }