How to make an element stay on nth cell using grid layout?

Question

I have a responsive grid layout, the columns and rows are calculated dynamically by the window's size.

Now I want the .target to be on a specific cell regardless of the grid columns, let's say the 7th cell, so if the grid has 5 columns, the .target should be on the row 2 and column 2. Is this possible to do it?

I know I can use grid-row and grid-column to assign the position of an element. But the grid rows and columns are dynamic, so I wouldn't know which row and column is the 7th cell.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

/* this need to be on the 7th cell */
.target {
  background-color: red;
}

I could create a lot of empty elements to push the .target on to the 7th cell, but I'm not allowed to touch the html structure so I can't do this:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

.target {
  background-color: red;
}

user_10867454 · Answer

Further clarification ascertained that there is always only one cell in the grid and it is to be positioned as the 7th cell.

This can be done by pure CSS if the grid is covering the width of the viewport. In this special case media queries determine at which row and column the target cell is to be.

          .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

.target {
  /* there will be at least 7 cells per row */
  grid-column: 7;
  grid-row: 1;
  background-color: red;
}

@media (max-width: 699px) {
  /* 6 cells in the first row ^/
  .target {
  grid-column: 1;
  grid-row: 2;
  }
  @media (max-width: 599px) { /* 5 cells per row */
  .target {
    grid-column: 2;
    grid-row: 2;
  }
  @media (max-width: 499px) {
    /* 4 cells per row */
    .target {
      grid-column: 3;
      grid-row: 2;
    }
    @media (max-width: 399px) {
      /* 3 cells per row */
      .target {
        grid-column: 1;
        grid-row: 3;
      }
      @media (max-width: 299px) {
        /* 2 cells per row */
        .target {
          grid-column: 1;
          grid-row: 4;
        }
        @media (max-width: 199px) {
          /* 1 cell per row */
          .target {
            grid-column: 1;
            grid-row: 7;
          }


  target cell

ORIGINAL ANSWER: which assumes the 'normal' case of there being children in the grid.

If there are fewer than 7 children in the grid then there won't be a 7th cell.

However if there are 7 or more direct children in the grid then you should be able to target the 7th one as a child using

.grid :nth-child(7) {background-color: red;}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

.grid span {
  background-color: #eeeeee;
}

.grid :nth-child(7) {
  background-color: red;
}

I may have misunderstood though - what is supposed to happen if there are less than 7 cells?

How to make an element stay on nth cell using grid layout?

1 Answers