CSS grid task board

Get Help CSS
#1

Hello all,

I’ve gone through the grid task board exercise on the front-end developer path and at the end of it the final column looks different to the demonstration version here. The column is aligned properly so this behaviour is expected, but I was wondering how I would get mine to emulate exactly what was in the demonstration?

I’ve tried aligning-content to start though this misaligns the content with the other columns. I’ve played around with this in terms of grid settings but can’t seem to find a solutions without adding extra classes to the html and then styling the final column separately.

image
image1747×786 98.6 KB

Below is my completed code from following the project.

@font-face {
	font-family: WorkSans;
	src: url("https://content.codecademy.com/courses/learn-css-grid/project-ii/Resources/Work_Sans/WorkSans-Regular.ttf");
}
@font-face {
	font-family: Poppins;
	src: url("https://content.codecademy.com/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: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-auto-flow: column;
}

.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;
	gap: 10px;
	min-height: 700px;
  display: grid;
  grid-template-rows: 20px repeat(5, 100px);
  align-content: space-around;
  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;
  position: relative;
}

.completed-projects {
	grid-template-rows: 20px;
	grid-auto-rows: 100px;

}

does anyone have another solution that I’m overlooking? It’s not the biggest deal in the world, but I’d be very appreciative if someone could give me an answer to this.

#2

Hi!
For the view to be exactly as in the demonstration, simply remove the line align-content: space-around; in the rule for the .card-column

But then in first two cards FUTURE PROJECTS and ACTIVE PROJECTS the content is not stretched and an empty white space at the bottom appears. But in the demonstration, if you look closely, it is there too :smiley:

If you want to stretch the content of all cards so that there is no white space at the bottom, you really only have to make a separate rule for the last card, I think :sweat_smile:

2 Likes
#3

Hi Zarlana,

Thank you. I kept on going through the code and completely overlooking that.
I went back and it worked just like you said.

Thanks again :smiley:

1 Like
#4

I was also confused when I did this project :face_with_hand_over_mouth:
I even re-watched the solution video to see what was wrong with me.
The only difference was align-content: space-between; instead of align-content: space-around;
But even with this change, the look was not the same as in the demonstration. Then I removed this line completely and got unexpectedly the desired result :see_no_evil: