网格格式有问题答案

【问题标题】：Having trouble with grid formating网格格式有问题
【发布时间】：2018-11-04 07:41:56
【问题描述】：

我正在尝试创建内联网格。我能够毫无问题地设置网格列等，但是应该将每个 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>

【问题讨论】：

你想达到什么目的？
我也不明白你想要什么。对不起。

标签： html css grid css-grid

【解决方案1】：

如果我对您的理解正确，您基本上需要表格和行。您必须将每一行设为一个网格，然后在其下的 div 放置 grid-column-start 属性。

把css改成这个，

.alexRowOne{
  display:grid;
}

然后这个，

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

【讨论】：