html - 很难用网格定位我的代码

Question

我需要创建一个仪表板，但我在使用网格布局定位所有元素时遇到了一些麻烦。

这是我的仪表板应该具有的组织:

img  img  nb  nb  members
Projects  nb  nb  
Collab    Activities
Asign     

我在我的 CSS 代码中初始化了一个 6 列 4 行的网格。

当我尝试使用 grid-column 和 grid-row 设置我的元素时，这是我的结果:

img nb projects nb collab Asignimg nb nb
成员(member)事件

这是我的 HTML 代码:

body
{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-gap: 20px;
}

.box
{
  background: #333;
  color: #fff;
	border-color: #8000FF;
  padding: 20px;
}

.img {
	grid-column: span 2;
	grid-row: 1;
}

.projects {
	grid-column: span 1;
	grid-row: 1;
}

.nb {
	grid-column: span 2;
	grid-row: 1;
}

.members {
	grid-column: span 2;
	grid-row: 2;
}

.collab {
	grid-column: span 1;
	grid-row: 1;
}

.activities {
	grid-column: span 4;
	grid-row: 2;
}

.asign {
	grid-column: span 1;
	grid-row: 1;
}

		<div class="img box">
			<article class="box">
				Photo 1
			</article>
			<article class="box">
				Photo 2
			</article>
		</div>

		<div class="nb box">
			<article class="box">
				35
			</article>
			<article class="box">
				19
			</article>
		</div>

		<aside class="members box">
			Membres
		</aside>

		<div class="projects box">
			Accédez à vos projets
		</div>

		<div class="nb box">
			<article class="box">
				170
			</article>
			<article class="box">
				1
			</article>
		</div>

		<div class="collab box">
			Invitez vos collaborateurs
		</div>

		<div class="activities box">
			Activités
		</div>

		<div class="asign box">
			Assignez vos projets
		</div>

问题出在哪里的任何想法？

Answer 1

您所拥有的不是 6 列网格 - 它似乎是一个 3 列网格，每列分成两列(基于您的 HTML)。

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-gap: 20px;
}

.box {
  background: #333;
  color: #fff;
  border-color: #8000FF;
  padding: 20px;
}

.img {
  grid-row: 1;
  display: flex;
}

.projects {
  grid-row: 2;
}

.nb-1 {
  grid-row: 1;
  display: flex;
}

.nb-2 {
  grid-column: 2;
  display: flex;
}

.members {
  grid-row: 1;
}

.collab {
  grid-row: 3;
}

.activities {
  grid-row: 3;
  // grid-column: span 2;
}

.asign {
  grid-row: 4;
}

<div class="img box">
  <article class="box">
    Photo 1
  </article>
  <article class="box">
    Photo 2
  </article>
</div>

<div class="nb-1 box">
  <article class="box">
    35
  </article>
  <article class="box">
    19
  </article>
</div>

<aside class="members box">
  Membres
</aside>

<div class="projects box">
  Accédez à vos projets
</div>

<div class="nb-2 box">
  <article class="box">
    170
  </article>
  <article class="box">
    1
  </article>
</div>

<div class="collab box">
  Invitez vos collaborateurs
</div>

<div class="activities box">
  Activités
</div>

<div class="asign box">
  Assignez vos projets
</div>
</div>