2

I'm looking for a way to align CSS Grid cells into two columns with some of the cells aligned left and some right but without any vertical gaps.

I have mocked the issue in codepen. I am trying to get the right column only to have no vertical spacing, is this possible?

.grid {
  width: 768px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  .cell {
    background: tomato;
    margin-bottom: 8px;

    &.a {
      grid-column: 1/6;
    }

    &.b {
      grid-column: 7/13;
    }
  }
}

img {
  width: auto;
  max-width: 100%;
}

This is the space i'm trying to remove so the content sits directly underneath:

css grid example

AltDan
  • 844
  • 4
  • 13
  • 27

1 Answers1

0

you can use grid-row: span 3 on the img element and grid-row : span 1 on the b row

Here is the Codepen for example

Muhammad Usama Ashraf
  • 564
  • 1
  • 5
  • 20