Super Practical CSS Grid Layout Tricks for 7‑Column Grids

1. Grid layout structure and limitations

The data comes from the backend as a flat one‑dimensional array, which can be rendered with a simple <div class="grid"> container and repeated <div class="grid-item">…</div> children. By default grid cannot target rows, so developers often wrap each row in an extra element to form a two‑dimensional array, which is cumbersome.

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  …
  <div class="grid-item">7</div>
</div>

Setting the grid style:

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 20px auto;
}

2. Using a repeating linear gradient

When each row has a fixed height (e.g., --size: 54px), a thin gradient can be tiled to draw the separator lines without extra markup.

.grid {
  --size: 54px;
  background: linear-gradient(
    transparent 0 calc(var(--size) - 1px),
    red 0 1px / 100% var(--size)
  );
}

Because the gradient paints from the padding-box by default, the background-origin: content-box rule is added to align the lines with the content area. .grid { background-origin: content-box; } Further adjustments with background-clip: content-box remove the extra top and bottom lines.

.grid { background-clip: content-box; }

3. Using top/bottom borders

Applying a top border to every grid item creates a separator, but the first row and incomplete last rows produce unwanted lines. .grid-item { border-top: 1px solid #ccc; } Switching to a bottom border reduces the first‑row artifact, yet the final row still shows an extra line when it is not full. .grid-item { border-bottom: 1px solid #ccc; } To hide the line on the last row, complex selector combinations are used. For example, when the last row contains a single element:

.grid-item:last-child:nth-child(7n+1) { border: none; }

When the last row has two elements:

.grid-item:nth-last-child(2):nth-child(7n+1),
.grid-item:nth-last-child(2):nth-child(7n+1)~.grid-item { border: none; }

Similar selectors are repeated for three, four, five, six, and seven items, each removing the border on the final row.

4. Leveraging pseudo‑elements

Instead of real borders, a ::before pseudo‑element on the first item of each row can draw a 1‑pixel line.

.grid-item:nth-child(7n+1)::before {
  content: '';
  display: block;
  height: 1px;
  background-color: #ccc;
}

For a more robust solution, the container is given position: relative and an ::after pseudo‑element on the first item of each row is positioned absolutely with left/right offsets, creating a line that spans the whole row.

.grid { position: relative; }
.grid-item:nth-child(7n+1)::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background-color: #ccc;
}

To exclude the very first row, :not(:first-child) is added, and the line is vertically shifted with transform: translateY(-15px) because vertical positioning is avoided.

.grid-item:nth-child(7n+1):not(:first-child)::after {
  transform: translateY(-15px);
}

5. Summary of the tricks

grid

cannot directly select rows.

Nesting rows to draw separators is verbose.

Repeating linear gradients provide an easy, scalable line pattern.

Gradients start from padding-box by default; background-origin: content-box aligns them with the content.

Pseudo‑elements let you control line size without altering the box model.

Complex :nth‑child selectors can target the last row under various item counts.

“Partial absolute positioning” with pseudo‑elements offers a clean, flexible solution.

All the demonstrated techniques are applicable to any grid layout where each row has a fixed height, and they are far more efficient than constructing a two‑dimensional array.

You might not know this absolute‑positioning trick – see the linked article for more details.