Блог

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

css-сетка, сверните ячейку, нажмите, чтобы затем одна из ячеек в следующем ряду поднялась

#html #css #layout #css-grid #fluid-layout

Вопрос:

Я привел этот простой пример моей текущей настройки сетки:

 document.querySelectorAll(".element").forEach(box => 
    box.addEventListener("click", () => box.classList.toggle("compressed"))
) 
 .container{
  display:grid;
  grid-template-columns: repeat(3, min-content);
  grid-template-rows:repeat(3, min-content);
  grid-auto-flow:column;
  gap:1rem;
}

.element{
  background-color:brown;
  border:1px solid black;
  width:10rem;
  height:10rem;
  text-align:center;
  color:white;
  line-height:10rem;
  font-size:2rem;
}

.elementBig{
  grid-row-end: span 2;
   height:21rem;
}

.compressed{
  height:2rem;
} 
 <div class="container">
<div class="element elementBig">big</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
<div class="element">7</div>
<div class="element">8</div>
<div class="element">9</div>
<div class="element">10</div>
</div>

когда вы нажимаете на ячейку, она уменьшается, но следующая не поднимается: допустим, я нажимаю на «большой» элемент, я хочу, чтобы «1» поднялся

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

 --n-colonne: 3; //per impostare massimo numero di colonne a 3 su grandi display
    display: grid;
    $larghezza-senza-spazi: calc(100% - (var(--n-colonne) - 1) * 1rem);
    grid-template-columns: repeat(auto-fill, minmax(max(45rem, ($larghezza-senza-spazi)/var(--n-colonne)), 1fr));
    grid-template-rows: repeat(12, min-content);
    grid-gap: 1rem;

это потребуется исправить, если будет использоваться «сетка-автоматический поток:столбец».

Ответ №1:

Проблема, с которой вы сталкиваетесь: сетка содержит строки, а строки имеют определенную высоту (в вашем случае: минимальное содержимое, которое составляет 10rem, если хотя бы одно поле в строке не сжато). В дополнение к этому, ваше большое поле должно всегда занимать две строки в соответствии с вашим определением (конец строки сетки: интервал 2;), поэтому изменение размера содержимого ячейки сетки ничего не изменит.

Не уверен, что сетка-это правильный путь, возможно, есть решение в новом дополнении к кладке в CSS3. Может быть, прочтите это: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Однако: если вы можете остановиться на нескольких кольцах (или как-то рассчитать это с помощью js), просто поместите свои коробки соответственно в кольцах, и это работает просто отлично.

 document.querySelectorAll(".element").forEach(box =>
  box.addEventListener("click", () => box.classList.toggle("compressed"))
) 
 .container {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  grid-auto-flow: column;
  gap: 1em;
}

.element {
  background-color: brown;
  border: 1px solid black;
  width: 10rem;
  height: 10rem;
  text-align: center;
  color: white;
  line-height: 10rem;
  font-size: 2rem;
  margin-bottom: 0.5em;
}

.elementBig {
  grid-row-end: span 2;
  height: 21rem;
}

.compressed {
  height: 2rem;
  overflow: hidden;
} 
 <div class="container">
  <div class="col1">
    <div class="element elementBig">big</div>
    <div class="element">1</div>
  </div>
  <div class="col2">
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
  </div>

  <div class="col3">
    <div class="element">5</div>
    <div class="element">6</div>
    <div class="element">7</div>
  </div>

  <div class="col4">
    <div class="element">8</div>
    <div class="element">9</div>
    <div class="element">10</div>
  </div>
</div>

Если это не вариант, вы всегда можете использовать flexbox, но у него есть свои проблемы:

 document.querySelectorAll(".element").forEach(box =>
  box.addEventListener("click", () => box.classList.toggle("compressed"))
) 
 .container {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  max-height: 800px;
  gap: 1rem;
}

.element {
  background-color: brown;
  border: 1px solid black;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
  line-height: 10rem;
  font-size: 2rem;
}

.elementBig {
  height: 21rem;
}

.compressed {
  height: 2rem;
} 
 <div class="container">
  <div class="element elementBig">big</div>
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
  <div class="element">7</div>
  <div class="element">8</div>
  <div class="element">9</div>
  <div class="element">10</div>
</div>

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

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

2. просто используйте первый пример, добавьте свои столбцы и элементы в js? Выполнено.

3. количество столбцов вычисляется в css, создание всей сетки в js не является опцией: каждый компонент-это частичные представления c#, сгенерированные серверным временем

Метки: , , ,