Блог

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

Можно ли разделить ячейку сетки CSS, которая была создана путем слияния нескольких ячеек ранее?

#html #css #css-selectors #css-grid

#HTML #css #css-селекторы #css-grid

Вопрос:

Допустим, у меня есть вложенная CSS-сетка 3×2 ( class="main-grid" ) (каждая ячейка содержит 3×2 grid ( class="item" ) внутри). Затем я применяю следующий стиль CSS: .main-grid :first-child {grid-column: 1/3;} предполагается объединить первые две ячейки main-grid и сделать то же самое для каждой из item сеток.

Но теперь я хочу разделить ячейку / не применять grid-column: 1/3 стиль только для одной item is-special сетки. Ячейка, которую я хочу разделить, выделена красным цветом ( class="sub-item special" )

Тогда мой вопрос в том, как я могу разделить эту ячейку или не применять grid-column: 1/3 стиль к ее item is-special сетке хоста? (Я не хочу делать это в другом классе, так как важно, чтобы все остальное форматирование было одинаковым для других item сеток. Я также не хочу создавать другую сетку внутри этой ячейки в качестве обходного пути. Я потратил немало времени на поиск чего-либо подобного в Интернете, но ничего не нашел, поэтому мне кажется, что grid-column: 1/3 это необратимое действие, что очень странно, учитывая, что все остальные параметры сетки css могут быть переопределены, например background-color ) Короче говоря, я ищу что-то, что будет работать следующим образом: .is-special {grid-column: *split*} или .main-grid :first-child :not(.is-special){...}

Пример для справки: 

 .main-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid rgb(114, 114, 114);

}
.main-grid :first-child{
  grid-column: 1/3;
  }
.item{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid rgb(114, 114, 114);
}
.sub-item{
border: 1px solid rgb(114, 114, 114);
}
.special{
background-color: red;
/*How do I split this cell?*/
}  
 <body>
  <section class="main-grid">
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item is-special">
      <div class="sub-item special">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
  </section>
</body>

Ответ №1:

Я попытался запустить ваш код, и столбец сетки: 1/3 не применяется class="sub-item special , это применимо только к 1-му дочернему элементу main-grid.

Вы можете реализовать свой css с помощью .item.is-специальный селектор.

Ответ №2:

Вы можете добавить более конкретный селектор для вашего случая (см. Комментарий в CSS)

 .main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid rgb(114, 114, 114);
}

.main-grid :first-child {
  grid-column: 1/3;
}

/* added rule to reset the above one in this special case */
.main-grid .is-special :first-child {
  grid-column: 1;
  background-color: yellow;
}

.item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid rgb(114, 114, 114);
}

.sub-item {
  border: 1px solid rgb(114, 114, 114);
}

.special {
  background-color: red;
  /*How do I split this cell?*/
}  
 <body>
  <section class="main-grid">
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item is-special">
      <div class="sub-item special">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
  </section>
</body>