Center columns that do not span full grid

Question

I have a grid made up of 12 columns, and it's child columns span 2 columns each. However, the number of column is variable, so sometimes there will be a full grid i.e 6 columns, and at other times only a partial grid i.e 2 columns. In this instance, can I centralise whatever columns are present?

Full grid

<div class="grid">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

Partial grid

<div class="grid">
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.col {
  grid-column: span 2/span 2;
  // How can we centralise when less than a full grid?
}

score 0 · Answer 1 · answered Mar 23 '20 at 19:52

Just make sure the child grid has a grid-column span equal to the columns of the parent grid.

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid2{
  border: solid 1px dodgerblue;
  grid-template-columns: 1fr 1fr 1fr;
}

.fullgrid{
  grid-column: 1/4; 
}

.grid1 > div{
  border: solid 1px orangered;
}

<div class="grid grid1">
  <div>1</div>
  <div>2</div>
  <div class="fullgrid">
    <div class="grid grid2">
        <div>3.1</div>
        <div>3.2</div>
        <div>3.3</div>
    </div>
  </div>
  <div>4</div>
  <div>4</div>
</div>

Center columns that do not span full grid

1 Answers1