Как поместить элементы CSS-сетки в контейнер сетки с помощью JavaScript - PullRequest
Новая
       11

Как поместить элементы CSS-сетки в контейнер сетки с помощью JavaScript

1 голос
/ 23 сентября 2019

Я играю в память, используя обычный js и css-grid.Я видел решение с flex-box, но я хочу сделать это с помощью css-grid.Проблема, с которой я столкнулся сейчас, заключается в размещении элементов сетки в контейнере сетки с использованием JavaScript.Я знаю, как сделать это в CSS, но не смог сделать это с JS.До сих пор я безуспешно пробовал следующее: 

const fillGrid = () => {
    let i = 1;
    document.getElementsByClassName('grid-item').forEach(element => {
        element.style.gridArea = `block${i++}`;
        document.getElementById('grid').appendChild(element);
    });
}

fillGrid();

Мое намерение состояло в том, чтобы назначить свойства 'grid-area' для каждого элемента grid в javascript, сохраняя при этом остальные свойства css-grid вчасть css.Я хотел использовать javascript, потому что я хочу динамически изменять положение каждого элемента.

HTML: 

    <div class="grid-container" id="grid">
        <div class="grid-item">
            <img src="img/2.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/1.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/3.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/5.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/6.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/7.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/8.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/9.jpg" class="frot-face"/>
        </div>
    </div>

CSS: 

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 'block1 block2 block3 block4' 'block5 block6 block7 block8' 'block1 block2 block3 block4' 'block5 block6 block7 block8';
    padding: 3em 2em 3em 2em;
    grid-gap: 1em;
    width: 73vmin;
    margin: auto;
    border-radius: 10px;
  }

1 Ответ

1 голос
/ 24 сентября 2019

Мне удалось решить эту проблему.Основная причина, по которой мой код не работал, заключается в том, что я неправильно использовал свойство gridArea.В отличие от свойства CSS grid-area, в JS (или DOM) это свойство не используется для присвоения имен элементам сетки.Вместо этого он

используется как сокращенное свойство для свойств grid-row-start, grid-column-start, grid-row-end и grid-column-end *

Ссылка: https://www.w3schools.com/cssref/pr_grid-area.asp или https://www.w3docs.com/learn-css/grid-area.html. Мой окончательный код выглядит так: 

const fillGrid = () => {
    let col = 1, row = 1;
    const items = [...document.getElementsByClassName('grid-item')];
    const grid = document.getElementById('grid');
    items.forEach(item => {
        item.style.gridArea = `${row} / ${col}`;
        col++;
        if(col>4){
          col=1;
          row++;
        }
    });
}

fillGrid();

CSS: 

 .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    padding: 3em 2em 3em 2em;
    grid-gap: 1em;
    width: 73vmin;
    margin: auto;
    border-radius: 10px;
    border: 2px solid black;
  }

  img{
    width: 100px;
    height: 100px;
  }
...