FAQ: CSS Grid Essentials - Grid Template

FAQ CSS FAQ
#1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Grid Template” exercise from the lesson “CSS Grid Essentials”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn CSS

FAQs on the exercise Grid Template

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

#2

It’s a really small detail, but I wish the lesson order had taught us Rows into Columns instead of Columns into Rows.

Like I said, super small detail, but it kind of irked me that the lesson taught me Columns, then Rows, then that the refactoring syntax is Rows / Columns.

18 Likes
#3

When they introduced the template property, this threw me off, too!
Gotta stay on edge and not turn on autopilot is what I feel was the message between the lines here. :smile:

3 Likes
#4

Howdy!

Do we need to specify the width/height when making grid templates?

Example from lesson:

.grid {
  display: grid;
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  grid-template-columns: 100px 50% 200px;
  grid-template-rows: 40% 50% 50px;
}

Can I just write:

.grid {
  display: grid;
  border: 2px blue solid;
  grid-template-columns: 100px 50% 200px;
  grid-template-rows: 40% 50% 50px;
}

Instead? Sorry for the stupid question but I dunno why we need to specify a height/width for a grid in the first few lines when our grid-template does it anyway.

#5

Hi,
Our grid rows and columns take up the percentages of the container(here the div with class grid).

#6

When would we use the grid-template-rows or grid-template-columns, instead of the grid-template format?

#7

If you only want to change the widths or number of rows, use the grid-template-rows property, if you only want to change the height or number of columns, use the grid-template-columns property, and if you want to modify both, use the grid-template property

Of course, these are simply best practices - there aren’t right or wrong answers

#8

I think you getting it wrong. The “grid-template-row” controls the number of rows and the height of the row (not the width as you have said)

While the “grid-template-column” controls the number of columns and the width of the column (not the height as you have said)

I stand to be corrected if I’m wrong though