CSS Grid - span rows

Question

I want to place 2 column's grid divs positioned inline with the 2nd row of divs (see diagram). The total number of rows is dynamic.

CSS

.content{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 100px 1em;
}

why do i need to add text just so I can post this question

Michael Benjamin · Accepted Answer

You can make this layout by using two grid containers.

A primary grid container will manage the left, center and right items. The center item holds the dynamic content.

A nested container will manage the dynamic content.

.content {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.column-with-dynamic-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12%, 1fr)); /* OR...
     grid-template-columns: repeat(7, 1fr); ...which is less responsive, 
                                               but may still work for you. */
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-column: 2 / 3;
}

.left {
  grid-column-start: 1;
  grid-row: 2 / 3;
}

.right {
  grid-column-end: -1;
  grid-row: 2 / 3;
}


/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray; border: 1px solid gray; }

CSS Grid - span rows

Answers (1)

jsFiddle demo

Related Questions