Grid: Task board

Hi,

I am doing project css task board and it’s seems that my completed project column is all the time uneven and I can’t find out why? I tried to do this project three times, watched walked through video, but I don’t know what I am doing wrong. Could anyone help me?

Thanks!
Link:
https://www.codecademy.com/courses/learn-css/projects/css-grid-project-ii

@font-face {
font-family: WorkSans;
src: url(“https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/Work_Sans/WorkSans-Regular.ttf”);
}
@font-face {
font-family: Poppins;
src: url(“https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/Poppins/Poppins-Regular.ttf”);
}

html {
height: 100%;
}

body {
height: 100%;
margin: 0;
background-image: linear-gradient(359deg, #3023ae, #eb7f7b);
background-repeat: no-repeat;
background-attachment: fixed;
}

.navbar {
display: grid;
grid-template-columns: 10px 1fr 3fr 1fr;
position: absolute;
width: 100%;
height: 60px;
background-color: rgba(120,70,154, 0.2);
text-align: center;
top: 0;
left: 0;
justify-content: space-around;
}

.navbar h1 {
grid-column: 3 / 4;
font-family: Poppins;
color: #ffffff;
margin: 0;
align-self: center;
}

.container {
width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
}

.search-bar {
grid-column: 2 / 3;
width: 100%;
height: 40px;
background-color: rgba(255,255,255, 0.35);
top: 8px;
position: absolute;
}

input {
display: inline-block;
border: none;
background: transparent;
font-size: 14px;
}

.search-bar input {
float: left;
height: 18px;
margin-top: 9px;
margin-left: 7px;
}

.card-column input {
height: 18px;
margin-left: 15px;
}

.search-icon {
float: left;
margin-top: 9px;
margin-left: 7px;
}

.card-column {
background-color: #ffffff;
grid-gap: 10px;
min-height: 700px;
display: grid;
grid-template-rows: 20px repeat(5, 100px);
align-content: space-between;
grid-auto-rows: 100px;

}

.card-column h2 {
padding: 0;
margin: 0 auto;
font-family: WorkSans;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.2px;
text-align: left;
color: #2f2f2f;
display: inline-block;
}

.taskgroup-heading {
margin-left: 15px;
margin-top: 7px;
}

.site-body {
position: absolute;
top: 100px;
margin-left: 50px;
}

.card {
margin-right: 15px;
margin-left: 15px;
background-color: rgba(216, 216, 216, 0.21);
border: solid 1px rgba(151,151,151,0.21);
position: relative;
}

.rectangle {
width: 57px;
height: 6px;
position: relative;
display: inline-block;
margin-left: 7px;
}

.list-icon {
display: inline-block;
margin-left: 7px;
margin-bottom: 5px;
position: absolute;
bottom: 0;
}

.task-description {
margin-left: 7px;
margin-top: 0;
font-family: WorkSans;
font-size: 14px;
letter-spacing: 0.2px;
text-align: left;
color: #2f2f2f;
}

.ellipsis-icon {
display: inline-block;
float: right;
margin-right: 15px;
}

.task-date {
display: inline-block;
font-family: WorkSans;
font-size: 10px;
letter-spacing: 0.1px;
text-align: left;
color: #9b9b9b;
position: absolute;
bottom: 0;
margin-bottom: 5px;
left: 25px;
}

.yellow {
background-color: #fdcb1e;
}

.orange {
background-color: #ff7700;
}

.green {
background-color: #50e3c2;
}

.blue {
background-color: #3343e5;
}

.add-card {
background-color: rgba(216, 216, 216, 0.21);
border: solid 1px rgba(151,151,151,0.21);
color: #2f2f2f;
}

.completed-projects {
grid-template-rows: 20px;
grid-auto-rows: 100px;
grid-gap: 20px;
}Preformatted text

1 Like

When you say uneven what do you mean? Are they not equally spaced out like the other columns, or are they spaced differently to the other columns, or something else?

1 Like

Hey there @cloudjumper83369 :grinning:
Could you post your code formatted using the button at the top of the post menu?
It look like this </>


I too am curious what exactly you mean by uneven, could you also post your HTML so we can run the code?

2 Likes

@cloudjumper83369 -
Maybe include a screenshot of your project so we can all see what issue is, visuals speak mountains! :slight_smile:

1 Like

Preformatted text

Project Task Board
![](upload://9MiS2CRNPAdrpKDhvYrJq09S4PM.svg)

STUFFED ANIMAL TASK LIST

FUTURE PROJECTS

![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg) ![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg) ![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg)

Pick Color Trends

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/21/2017

Source Fabrics

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/21/2017

Manufacture clothing

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/20/2017

Confirm structural integrity

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/23/2017

Manufacture mandibles

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/26/2017

ACTIVE PROJECTS

![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg) ![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg) ![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg)

Test fear factor

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/20/2017

Develop button samples

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/21/2017

Recall malfunctioning giraffes

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/21/2017

task task task task

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/20/2017

Perform user research on new stuffing

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/23/2017

COMPLETED PROJECTS

![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg) ![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg) ![](upload://lZGREuphO3oLJ3TtkPN0g7QsVVg.svg)

Research Trends

![](upload://wB5iWEfYqwmY1BrvEHJyfSehA15.svg)

4/19/2017

Add
`Preformatted text`

have you found out the problem?

I’ve got the same problem. Followed all steps correctly according to the walk through but the Completed Projects column is messed up. Exactly like cloudjumper83369’s screen grab. Did anyone figure this one out?

2 Likes

Same problem here, it’s in the middle of the completed projects and when i press add, it will add rows with space-between until i have the same amount of rows than the 2 other columns, there it will look ok. But once i add more rows, my header will start shrinking below 20px too. i know i could be working on this thing for hours until i get it done properly, but since this project is part of the lesson and not a project meant to do outside where i would be the one writing ALL the code, i think it should be fixed by the Codecademy staff for everybody to enjoy the results of our work.
Btw, i see this has been posted on june 19 and it’s still not fixed but it has been reported on different post earlier than that (up to feb 2019 if i’m correct), it is the 3rd project/lesson that has a problem since i started the grid lesson and i think it’s a lot (too much tbh).

2 Likes

Hey guys, in this project my “display: grid;” does not work, it is also with blue letters, not with violet as it should be, and that being like the first step in the project I cannot do it, did someone else had this issue? I had it a couple of projects ago, also in the CSS course. Thanks.

I was wondering about this too. I checked my work against the video walk through and noticed that when the instructor adds the third column, it doesn’t take the align-content: space-between for the cards selector. Perhaps he already used an id to override it and have the cards align to the top? A bit confusing, but I’m just goin to go ahead and add that myself and call it done.

Edit: There’s another class for each card-column, the completed projects column is called “completed-projects” (obviously) so an extra rule as follows…

.card-column + .completed-projects {
align-content: start;
}
sets the added cards in the last column to start at the top and each new one is added underneath.

Hope this helps someone.

3 Likes
.completed-projects {
	grid-template-rows: 20px;
	grid-auto-rows: 100px;
  align-content: start;
  grid-row-gap: 35px;
}
1 Like

thanks for your post as i was same like other people above but i found your post and tested it. All done now :slight_smile:

1 Like

Glad it helped :sunglasses:

1 Like

Just to add to this thread in case anyone finds it handy, I found the solution above worked but the gaps were still different to the other two columns (completed projects is right on top of the first card), I tried the following and it seems to have made them all match perfectly:

.completed-projects {
  grid-template-rows: 20px repeat(5, 100px);
  grid-auto-rows: 100px;
  align-content: space-between;
}```

Hello everyone,
It is key to delete the ruleset for the completed-projects class. I would suggest going through all 8 task steps. Then, cut the entire completed-projects class ruleset and save. You’ll notice that solves the issue. The reason, I think, is that for that third column, all explicit info is defined by the container already.
In addition to that, I noticed that when I also removed and/or changed the value of the implicit property of grid-auto-rows from the card-column class, the rows added after clicking the add button appeared as the desirable size of 100px regardless of any other value added to grid-auto-rows (until their are more than 5 rows).

1 Like

I tried to utilize implicit properties somehow, since it seemed like it should have been part of this project. The following is what I’ve come up with so far. Try it out and let me know what you think, please.

.container {

width: 1000px;

display: grid;

grid-template-columns: repeat(2, 1fr);

grid-gap: 20px;

grid-auto-flow: column;

grid-auto-columns: 1fr;

}

in order to make it look like the example I deleted align-content: space-around