Как автоматически создавать столбцы с сеткой css на реагирующих компонентах - PullRequest
Новая
       8

Как автоматически создавать столбцы с сеткой css на реагирующих компонентах

0 голосов
/ 29 января 2020

У меня есть массив элементов, которые я отображаю и передаю его содержимое компоненту. Таким образом, я автоматически отрисовываю несколько компонентов и хочу иметь возможность использовать сетку css для идеального выравнивания каждого компонента. Я пробовал grid-auto-column, но, похоже, он не работает, поэтому мне было интересно, возможно ли это сделать? Я знаю точное количество раз, когда компонент сделан, поэтому я могу просто жестко кодировать количество столбцов. Но я просто хочу сделать это более пригодным для повторного использования.

изменить: вот код 

//questionList.js
render(){

  const answerList = this.state.answers.map((answer, index)=>{
      return <AnswerBox letter={answer} key={index}/>
  })

  return(
      <div className='list-container'>    
          <div className="grid-container_questions">
              <div className="grid-container_password"> 
                  {answerList}
              </div>
              <div className='questionlist-container'>
                  {this.renderList}
              </div>
          </div>  
      </div>
  )
}

//AnswerBox.js
const AnswerBox = (props) =>{
    return(
        <div className="letter_container">
            <div className="box">{props.letter}</div>
        </div>

    )
}


/*css file*/
.grid-container_password{
    position: absolute;
    left: 27%;
    width: 60%;
    height: 10%;
    display: grid;
    grid-template-columns: 12% 12% 12% 12% 12% 12%;

}
.letter_container{
    grid-auto-columns: auto;
}
...