Alex Posts - Answer Overflow

Alex

•Created by Alex on 7/30/2023 in #front-end

How to center a grid-item horizontally within grid-container when item doesn't span the full width

I a have grid-container with 8 even columns. I then have 2 grid-items. the first having a span of 4 columns, the second 8 columns. That forces 2 rows which is what i expect and want. The first one is aligned on the left (spanning half, this is the one i want centered) The second one does of course span the full width, therefore no need for centering. I'm aware i could achieve this by specifying the column-start and -end on the first item, but i'm curios if this can be achieved only specifying a span. I have tried all possible (i think) justify and align, items and content, both on parent and on child (using -self) - none seems to work Thanks in advance, i hope my question makes sense 🙂

<div class="grid-container">
  <div class="grid-item1"></div>
  <div class="grid-item2"></div>
</div>

<div class="grid-container">
  <div class="grid-item1"></div>
  <div class="grid-item2"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  
  .grid-item {
    &1 {
      grid-column: span 4;
    }
    &2 {
      grid-column: span 8;
    }
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  
  .grid-item {
    &1 {
      grid-column: span 4;
    }
    &2 {
      grid-column: span 8;
    }
  }
}

17 replies

Gaming

Programming