如何在显示网格中使用偏移量（边距）

Posted 2023-02-22

【中文标题】如何在显示网格中使用偏移量（边距）

【英文标题】：How to use offset(margin) with display grid

【发布时间】：2020-11-04 11:23:16

【问题描述】：

好吧，是时候在 CSS 中使用带有display: grid 的新布局方法了。 我尝试在我的 CSS 库中使用网格，为了与旧浏览器兼容，我将保持相同的 API 和相同的外观。但是我面临一个问题，即如何在display:grid 中使用偏移量，例如 bootstrap.css，边距不起作用。

哈巴狗（翡翠）

.row.gutter
  .col.col-6
  .col.col-6  
  .col.col-6  
  .col.col-6  
  .col.col-6  
  .col.col-5.offset-1  
  .col.col-4.offset-2

手写笔

*
  box-sizing:border-box
.row
  display:grid
  grid-template-columns: repeat(24, 1fr)
  grid-gap 10px
 .col
   background:red
   height 100px 
 for $item in 1..25
   .col-$item
     grid-column-end span $item
   //how to do for offset property
   // .offset-$item
         margin-left percentage($item / 24)

感谢您的帮助

Codepen

【参考方案1】：

尝试添加这个可能对你有帮助。

.col.col-6.offset-2
  grid-row-start: 1;
  grid-row-end: 3;