Перекрытие CSS-таблицы-шаблона-столбца индивидуально - PullRequest
Новая
       3

Перекрытие CSS-таблицы-шаблона-столбца индивидуально

2 голосов
/ 04 октября 2019

Я пытаюсь создать две кнопки, каждая из которых переключает определенный столбец при использовании CSS grid.

  • У меня есть простая сетка, которая переключает ширину первого и последнего столбцов. (см. Фрагмент)

  • Я хочу иметь возможность независимого переключения ширины столбца (без дальнейшего использования JavaScript) .

  • Поскольку класс active применяется к контейнеру, каждый столбец не может определить активное состояние другого.

  • При использовании flex активный класс будет применяться кстолбец (например, item1) напрямую делает это не проблемой.

ВОПРОС

Есть ли CSSсвойство ширины столбца сетки, которое можно применить к столбцу (например, item1) с изменением настроек в grid-template-columns?

ИЛИ

Есть ли свойство сетки CSS, например grid-template-columns, которое может быть нацелено на отдельные столбцы, а не на все столбцы в одном свойстве? 

$("#js-btn-left").on("click", function () {
  $(".grid-container").toggleClass("active");
});
$("#js-btn-right").on("click", function () {
  $(".grid-container").toggleClass("active");
});
.grid-container {
  display: grid;
  grid-template-columns: 50px auto 50px;
  grid-gap: 10px;
}

.grid-container > div {
  background-color: #b00;
  border:2px solid #000;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.grid-container.active{
  grid-template-columns: 100px auto 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-left" type="button" value="TOGGLE COLUMN 1"/>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN 3"/>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div> 
</div>

1 Ответ

3 голосов
/ 04 октября 2019

Определите столбцы с помощью переменных CSS, а затем просто измените переменную: 

$("#js-btn-left").on("click", function () {
  $(".grid-container").toggleClass("active1");
});
$("#js-btn-right").on("click", function () {
  $(".grid-container").toggleClass("active3");
});
.grid-container {
  display: grid;
  grid-template-columns: var(--c1,50px) auto var(--c3,50px);
  grid-gap: 10px;
}

.grid-container > div {
  background-color: #b00;
  border:2px solid #000;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.grid-container.active1{
  --c1:100px;
}
.grid-container.active3{
  --c3:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-left" type="button" value="TOGGLE COLUMN 1"/>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN 3"/>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div> 
</div>

Другой способ hacky - полагаться на неявную сетку и настраивать grid-auto-column

$("#js-btn-right").on("click", function () {
  $(".grid-container").toggleClass("active");
});
.grid-container {
  display: grid;
  grid-template-columns:  auto ; /* only one column on the explicit grid */
  grid-auto-flow:column; /*Make the flow column*/
  grid-auto-columns:50px;
  grid-gap: 10px;
}

.item1 {
   /* Make the item1 at the left of the explicit grid 
       to undestand how it works: 
       https://stackoverflow.com/a/57750033/8620333 */
  grid-column: random -1; 
}
.grid-container.active{
  grid-auto-columns:100px;
}



.grid-container > div {
  background-color: #b00;
  border:2px solid #000;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN"/>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div> 
</div>

Если вы хотите настроить таргетинг только на столбец: 

$("#js-btn-right").on("click", function () {
  $(".grid-container").toggleClass("active");
});
.grid-container {
  display: grid;
  grid-template-columns: 50px auto ;
  grid-auto-flow:column; 
  grid-auto-columns:50px;
  grid-gap: 10px;
}

.grid-container.active{
  grid-auto-columns:100px;
}



.grid-container > div {
  background-color: #b00;
  border:2px solid #000;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN"/>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div> 
</div>

Или вместо изменения ширины столбца вы можете просто изменить количество столбцов, которое должен занимать каждый элемент: 

$("#js-btn-left").on("click", function () {
  $(".grid-container").toggleClass("active1");
});
$("#js-btn-right").on("click", function () {
  $(".grid-container").toggleClass("active3");
});
.grid-container {
  display: grid;
  grid-template-columns: 50px 40px auto 40px 50px; /* 40px because we have 10px of gap so the total will be 100px */
  grid-gap: 10px;
}

.grid-container > div {
  background-color: #b00;
  border:2px solid #000;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item2 {
  grid-column:span 3;
}
.grid-container.active3 .item3,
.grid-container.active3 .item2,
.grid-container.active1 .item1,
.grid-container.active1 .item2{
  grid-column:span 2;
}

.grid-container.active1.active3 .item2{
  grid-column:initial;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-left" type="button" value="TOGGLE COLUMN 1"/>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN 3"/>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div> 
</div>
...