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

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?

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).