Define a max width for a group of columns in css-grid

user_8217210 0
Viewed 175

Is it possible to define a max width for a group of columns in css-grid?

I'm trying to use css-grid alongside bootstrap like flex-box markup to make fullwidth rows which align with the flex-box columns.

.container__grid {
  width: 100%;
  display: grid;
  grid-template-columns: [view-start] minmax(1em, 1fr) repeat(12, 95px [col])/* Specify a max-width and center */
  [view-end];
}

.col-9--viewport-edge {
  grid-column: view-start/col 9;
  background-image: url('https://images.unsplash.com/photo-1516139008210-96e45dccd83b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ac07676efc2ca5b11b548d8ae01301ba&auto=format&fit=crop&w=2200&q=80');
  background-position: bottom center;
  background-size: cover;
}

.col--remaining {
  grid-column-end: col 12;
}
<div class="container__grid">
  <div class="col-9--viewport-edge">
    <div class="col__inner"></div>
  </div>
  <div class="col--remaining">
    <div class="col__inner">
      <p>col-3</p>
    </div>
  </div>
</div>

There's a sandbox here in which the goal is to get the cat column starting at the viewport edge and finishing at column 9 so that both col-3's line up vertically.

flexbox css-grid css
1 Answers

Nothing fancy, but maybe something this will work for you.

Instead of this:

.container__grid{
   display: grid;
   grid-template-columns: 
      [view-start] minmax(1em, 1fr) 
      repeat(12, 95px [col])
      [view-end];
  }

.col-9--viewport-edge{
   grid-column: view-start/col 9;
}

.col--remaining{
  grid-column-end: col 12;
}

Try this:

.container__grid {
   display: grid;
   grid-template-columns: repeat(20, 5%);
}

.col-9--viewport-edge {
   grid-column: 1 / 16;
}

.col--remaining {
   grid-column: 16 / 21;
 }

Not sure how you want to handle wider screen sizes.

revised codepen

user_35972760
Related