CSS Grid: Position grid items in specific column

January 27, 2022

I have a ul which in total contains 11 items.

I’m using display: grid in order to achieve a layout where the first column (of the two) contains 7 of the li elements.

I’ve tried to follow the approach here, by using grid-template-areas, but my left li‘s seem to overlap each other.

In short, I’m looking to have first column (left) with 7 items, and second column (right) with 4.

Demo:

.grid {
  display: grid;
  grid-template-areas: "left right";
  grid-template-columns: repeat(2, 1fr);
  min-width: 375px;
  padding: 10px 0;
  list-style-type: none;
}
.grid__item:nth-child(-n+7) {
  grid-area: left;
}

<ul class="grid">
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
</ul>

>Solution :

You can do it like below:

.grid {
  display: grid;
  grid-auto-flow:dense; /* this */
  min-width: 375px;
  padding: 10px 0;
  list-style-type: none;
}
.grid__item {
  grid-column:2; /* and this */
}

.grid__item:nth-child(-n+7) {
  grid-column:1; /* and this */
}

<ul class="grid">
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
</ul>