Блог

Главная - Вопросы по программированию - Как сделать так, чтобы элемент оставался в n-й ячейке, используя макет сетки?

Как сделать так, чтобы элемент оставался в n-й ячейке, используя макет сетки?

#html #css #css-grid

Вопрос:

У меня есть адаптивный макет сетки, столбцы и строки динамически рассчитываются по размеру окна.

Теперь я хочу .target , чтобы они находились в определенной ячейке независимо от столбцов сетки, скажем, в 7-й ячейке, поэтому, если в сетке 5 столбцов, .target они должны быть в строке 2 и столбце 2. Возможно ли это сделать?

Я знаю, что могу использовать grid-row и grid-column назначать положение элемента. Но строки и столбцы сетки являются динамическими, поэтому я не знаю, какая строка и столбец являются 7-й ячейкой.

 .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;
} 
 <div class="grid">
  <span class="target"></span>
</div>

Я мог бы создать много пустых элементов, чтобы переместить .target их в 7-ю ячейку, но мне не разрешается прикасаться к структуре html, поэтому я не могу этого сделать:

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

.target {
  background-color: red;
} 
 <div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="target"></span>
</div>

Ответ №1:

Дальнейшее уточнение показало, что в сетке всегда есть только одна ячейка, и она должна располагаться как 7 — я ячейка.

Это может быть сделано с помощью чистого CSS, если сетка покрывает ширину окна просмотра. В этом особом случае медиа-запросы определяют, в какой строке и столбце должна находиться целевая ячейка.

           .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;
          } 
 <div class="grid">
  <span class="target">target cell</span>
</div>

ОРИГИНАЛЬНЫЙ ОТВЕТ: который предполагает «нормальный» случай наличия детей в сетке.

Если в сетке меньше 7 детей, то 7-й ячейки не будет.

Однако, если в сетке есть 7 или более прямых дочерних элементов, вы должны иметь возможность выбрать 7-го в качестве ребенка, используя

 .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;
} 
 <div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Хотя, возможно, я неправильно понял — что должно произойти, если клеток меньше 7?

Комментарии:

1. Я хочу, чтобы элемент находился на позиции 7-й ячейки, как если бы перед ним было 6 элементов, даже если их нет :/

2. Например, в случае, когда клеток вообще нет, что вы хотите, чтобы произошло? В случае, если ячеек меньше 7, что вы хотите сделать с промежуточным пространством — оно должно быть частью родительской сетки, но в остальном пустым?

3. В макете сетки всегда есть только один дочерний элемент, цель, которую я хочу достичь, — поместить его в произвольную ячейку.

4. Ах! Я думаю, что наконец-то понял, спасибо. Не уверен, что это можно сделать без расчета из-за минимального значения, но я подумаю.

Метки: , ,