Блог

Главная - Вопросы по программированию - динамическая генерация сетки css

динамическая генерация сетки css

#javascript #jquery #css #reactjs

#javascript #jquery #css #reactjs

Вопрос:

Я хотел бы знать, как я могу создать эту сетку в ReactJS или vanila javascript?

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

введите описание изображения здесь

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

1. w3schools.com/css/css_grid.asp

Ответ №1:

Вы можете сделать что-то подобное, это будет работать для 3×5, но вы можете раскрасить, как хотите, для этого вам нужен стиль div в виде сетки, чтобы получить их в таком порядке.

 const createTable = (blue,yellow,red)=>{
  let x = 3;
  let y = 5;
  const grid = document.getElementsByClassName('mygrid')[0]
  for(let i = 0;i<x;i  ){
    var div = document.createElement('div')
    div.classList.add('createdDiv')
    grid.appendChild(div)
    for(let z=1;z<y;z  ){
     var div = document.createElement('div')
     div.classList.add('createdDiv')
      grid.appendChild(div)
    }
  }
  
  let allDivs = document.getElementsByClassName('createdDiv');
  [...allDivs].forEach((el,i)=>{
    if((i 1)%x==1amp;amp;(i 1)/x >= y-blue){
      el.classList.toggle('blue')
    }else if( (i 1)%x==2 amp;amp; ((i 1)/x) >= y-yellow ){
      el.classList.toggle('yellow')
    }else if((i 1)%x==0 amp;amp; ((i 1)/x)> Math.abs(red-y)){
      el.classList.toggle('red')
    }
      
  })
  
  
}

createTable(4,1,3)  
 .mygrid{
  display:grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.mygrid > div{
  border:1px solid #666;
  padding:20px;
  text-align:center;
}

.blue{
  background-color:#33f;
}
.yellow{
  background-color:yellow;
}
.red{
  background-color:red;
}  
 <div class="mygrid">
</div>

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

1. Попробуйте мой новый ответ, в котором вы можете выбрать по номеру нужного дочернего элемента…

Ответ №2:

Как насчет этого?

 document.querySelector(".mygrid > div:nth-child(2)").style.backgroundColor = "red";
document.querySelector(".mygrid > div:nth-child(4)").style.backgroundColor = "blue";  
 .mygrid{
  display:grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.mygrid > div{
  border:1px solid #666;
  padding:20px;
  text-align:center;
}

.blue{
  background-color:#33f;
}
.yellow{
  background-color:yellow;
}
.red{
  background-color:red;
}  
 <div class="mygrid">

  <div style="grid-column:1/-1;">1</div>
  <div >2</div>
  <div class="">3</div>
  <div class="">4</div>
  <div class="">5</div>
  <div class="">6</div>
  <div class="">7</div>
  <div class="e">8</div>
  <div class="">9</div>
  <div class="">10</div>
  <div class="">11</div>
  <div class="">12</div>
  <div class="">13</div>
</div>

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

1. спасибо, но он должен быть динамическим, чтобы в столбце 1 (синий) кто-то мог выбрать 2 вместо 4. ваше решение заключается в жестком кодировании класса