Возникли проблемы с формированием сетки

Question

Я пытаюсь создать встроенную сетку.Я смог установить столбцы сетки и тому подобное без проблем, но div, которые должны назначать каждый div для определенной области, - нет.Скорее всего проблема с вложением, но не уверен, гдеТакже обратите внимание, что это технически внутри другой сетки, но проблема сохраняется даже за пределами другой сетки.

    .galleryGrid {
      display: grid;
      height: 900px;
      margin: auto auto;
      padding-top: 150px;
      grid-template-columns: 150px 150px 150px;
      grid-template-rows: 150px 150px 150px 150px 150px 150px;
      grid-row: 3 / span 1;
      grid-column: 1 / span 1;
      grid-column-gap: 25px;
      grid-row-gap: 25px;
      text-align: center;
    }

    (hashtag)black {
      height: 150px;
      width: 150px;
    }

    .alexRowOne .alexColumnOne {
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
    }

    .alexRowOne .alexColumnTwo {
      grid-column: 2 / span 1;
      grid-row: 1 / span 1;
    }

    .alexRowOne .alexColumnThree {
      grid-column: 3 / span 1;
      grid-row: 1 / span 1;
    }

    .alexRowTwo .alexColumnOne {
      grid-column: 1 / span 1;
      grid-row: 2 / span 1;
    }

    .alexRowTwo .alexColumnTwo {
      grid-column: 2 / span 1;
      grid-row: 2 / span 1;
    }

    .alexRowTwo .alexColumnThree {
      grid-column: 3 / span 1;
      grid-row: 2 / span 1;
    }

    .alexRowThree.alexColumnOne {
      grid-column: 1 / span 1;
      grid-row: 3 / span 1;
    }

    .alexRowThree .alexColumnTwo {
      grid-column: 2 / span 1;
      grid-row: 3 / span 1;
    }

    .alexRowThree .alexColumnThree {
      grid-column: 3 / span 1;
      grid-row: 3 / span 1;
    }

    .alexRowFour .alexColumnOne {
      grid-column: 1 / span 1;
      grid-row: 4 / span 1;
    }

    .alexRowFour .alexColumnTwo {
      grid-column: 2 / span 1;
      grid-row: 4 / span 1;
    }

    .alexRowFour .alexColumnThree {
      grid-column: 3 / span 1;
      grid-row: 4 / span 1;
    }

    .alexRowFive .alexColumnOne {
      grid-column: 1 / span 1;
      grid-row: 5 / span 1;
    }

    .alexRowFive .alexColumnTwo {
      grid-column: 2 / span 1;
      grid-row: 5 / span 1;
    }
    
    .alexRowFive .alexColumnThree {
      grid-column: 3 / span 1;
      grid-row: 5 / span 1;
    }

    .alexRowSix .alexColumnOne {
      grid-column: 1 / span 1;
      grid-row: 6 / span 1;
    }

    .alexRowSix .alexColumnTwo {
      grid-column: 2 / span 1;
      grid-row: 6 / span 1;
    }

    .alexRowSix .alexColumnThree {
      grid-column: 3 / span 1;
      grid-row: 6 / span 1;
    }

    .alexRowOne {
      grid-row: 1 / span 1;
    }

    .alexRowTwo {
      grid-row: 2 / span 1;
    }

    .alexRowThree {
      grid-row: 3 / span 1;
    }

    .alexRowFour {
      grid-row: 4 / span 1;
    }

    .alexRowFive {
      grid-row: 5 / span 1;
    }

    .alexRowSix {
      grid-row: 6 / span 1;
    }

<div class="galleryGrid">
	<div class="alexRowOne">
		<div class="alexColumnOne">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnTwo">
			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEX///+nxBvIAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" width="150px">
		</div>
		<div class="alexColumnThree">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
	</div>
	<div class="alexRowTwo">
		<div class="alexColumnOne">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnTwo">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnThree">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
	</div>
	<div class="alexRowThree">
		<div class="alexColumnOne">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnTwo">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-    solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnThree">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
	</div>
	<div class="alexRowFour">
		<div class="alexColumnOne">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnTwo">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnThree">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
	</div>
	<div class="alexRowFive">
		<div class="alexColumnOne">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnTwo">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnThree">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
	</div>
	<div class="alexRowSix">
		<div class="alexColumnOne">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnTwo">
			<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" id="black" height="150px" width="150px">
		</div>
		<div class="alexColumnThree">
		</div>
	</div>
</div>

Answer 1

Если я вас правильно понимаю, вам нужны таблицы и строки, по сути.Вы должны сделать каждую строку сеткой, а затем в div, где вы помещаете свойство grid-column-start.

Измените CSS на это,

.alexRowOne{
  display:grid;
}

, а затем,

 .alexRowOne .alexColumnOne {
          grid-column: 1 / span 1;
          grid-row: 1 / span 1;
        }