求助：已用CSS display:grid完成基础网格，如何创建偏移效果？

Hey Simon, let's sort out that offset grid layout you're working on! You already have your basic 1-6 grid set up with display: grid—great start. The key to creating those offset positions you want is using CSS Grid's grid-column and grid-row properties, which let you manually place items exactly where you need them instead of relying on the default flow.

Here's a concrete example to walk you through it. Let's assume your base grid is a 3-column layout (adjust columns to match your setup):

HTML Structure #

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Base Grid CSS #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  grid-gap: 1.5rem; /* Space between items */
  padding: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.grid-item {
  background: #f1f5f9;
  padding: 2rem;
  text-align: center;
  font-size: 1.8rem;
  border-radius: 8px;
}

Adding Offset Effects #

Now, let's rearrange items to create that offset look. For example, if you want item 2 to shift down to the second row, and item 3 to span two columns in the first row, add this CSS:

/* Offset item 2 to the second row, first column */
.grid-item:nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}

/* Make item 3 span columns 2 and 3 in the first row */
.grid-item:nth-child(3) {
  grid-column: 2 / span 2;
}

/* Shift item 4 up to the first row, first column */
.grid-item:nth-child(4) {
  grid-row: 1;
  grid-column: 1;
}

Key Tips for Offset Layouts #

• Use grid-column: X / span Y to make an item span multiple columns (replace X with the starting column, Y with the number of columns to span).
• grid-row works the same way for rows—perfect for shifting items up or down.
• If you want the grid to automatically fill empty gaps from offset items, add grid-auto-flow: dense to your .grid-container (just note this might reorder items visually).

If your specific offset needs are different (like a 2-column grid or more complex spanning), just tweak the column counts and placement values to match your desired layout.

内容的提问来源于stack exchange，提问作者Simon