网格格式化遇到问题

时间：2018-05-25 01:18:55

标签： html css css3 grid css-grid

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

1 个答案:

答案 0 :(得分：0)

如果我理解正确，你基本上需要表格和行。你必须让每一行都成为一个网格，然后你下面的div就是你放置grid-column-start属性的地方。

将css更改为此，

.alexRowOne{
  display:grid;
}

然后这个，

 .alexRowOne .alexColumnOne {
          grid-column: 1 / span 1;
          grid-row: 1 / span 1;
        }
相关问题
最新问题