CODEWITHSUNDEEP
htmlcsscss-grid
MissKnacki
MissKnacki

Reputation: 279

Difficulties to position my code with a grid

I need to create a dashboard and I have some trouble to position all my elements using grid-layout.

This is the organisation that my dashboard is suppose to have :

img  img  nb  nb  members
Projects  nb  nb  
Collab    Activities
Asign

I initialize in my css code, a grid with 6 columns et 4 rows.

When I tried to set my elements using grid-column et grid-row, this is my result :

img nb projects nb collab Asign img nb nb
Members Activities

Here is my HTML code :

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>

Any ideas from where the problem is ?

Upvotes: 1

Views: 51

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

What you have there is NOT a 6 column grid - it seems to be a 3 column grid with each column split in two (based on your 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>

Upvotes: 1

Related Questions