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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
Are these equivalent? This is instruction 2 in the section 15 of grid css. I tried the first line below and it was not accepted but seems to give the same result as the second line.
It is the same but we still need to keep in mind what the instructions ask for. There is no mention of using repeat(), so it is not expected by the SCT.
HTML class is called “box a” but when I was doing the last exercise (Grid essentials review page 15) CSS only accepted .a { } Why didn’t it accept .box a ?
Valid, yes, but the SCT may not be expecting it in that form. If we are being instructed in the individual properties, then that is what we should follow. Shorthand properties will likely follow shortly.
We were instructed in shorthand before this summary. The summary asks us to do the shorthand version in exercise 7 but if the syntax is correct, better even, and we have already learned it, it should be a possible solution regardless. This way I wondered if I had misunderstood the shorthand version for quite a bit before reverting to the more elaborate statement, only to then be promted to do the shorthand version. Seems a bit silly that the exercise requests the less optimal solution after we have learned something more optimal. Just feedback. The course as a whole is great!
Why is it that the ‘address’, ‘hours’, ‘call us’, and testimonial elements don’t fill up their entire row in the mobile view (width < 600px)? I tried many different ways to try and fix this, but could not find a solution, it’s very frustrating.
The other elements, such as the banner and ‘about us’, do span the full width of their row. I don’t see any difference between the ‘about’ class and the ‘box’ class that would make those two behave differently. Any help? Thanks!
…would refer to an <a> HTML anchor element inside the .box CSS class selector. However, this exercise contains no <a> anchor elements in the HTML.
.box.a
…You could do this (making sure there’s no white space between the classes), but it would serve no special purpose. The .a selector is all you need to affect the HTML code.
Try to think about it as a series of steps going from general to specific.
Step 1. We need to figure out how big our container is. Determine this with height and width properties in the .grid class. For simplicity’s sake, make the height and width the same size. (In px.)
Step 2. We need to figure out how many rows and columns we have in our container. Determine this using the grid-template-rows and grid-template-columns properties in the .grid class. For simplicity’s sake, make four rows and four columns, and make all rows and columns the same size ( 1fr value for each one).
Step 3. We need to change the size of our grid items (A thru E in the HTML). Create classes in the CSS for each grid item class (.a, .b, .c etc.) and start changing their sizes around using grid-row-start / grid-row-end and grid-column-start / grid-column-end.
REMEMBER: The space you are moving the items around in is 4x4 (4 rows and 4 columns). You can of course change the number of rows and columns along with everything else.
When you’ve got a handle of how it works, try refactoring your code to make it more efficient.
There’s a mistake in the last exercise in Slide 15.
It doesn’t allow you to use “grid-row-end: span 2;”, it only accepts “grid-row-end: 3;” as the right value, At the same time, the Hint tells you to set it to “grid-row-end: span 3;”, which is incorrect.
For the CSS Chart Review, why am I required to use “span” for items spanning multiple columns (“grid-column-end: span 2;”), and to use specific end lines for items spanning multiple rows (“grid-row-end: 3;”)? I had thought these two approaches for spanning items could be used interchangeably. Thanks
Currently pulling my hair out on section 15 review, instruction #3. It says to create 2 rows, both 200px in size, but it appears that nothing I enter works. Here’s everything I’ve tried:
I’ve tried multiple variations of each. Each of those creates 2 rows, 200 pixels tall, but the instructions still give me a red X. Am I messing up or is this section bugged?
Edit 2: I ended up forcing the course to solve it for me just so I could move on. It showed the answer as grid-template-rows: 200px 200px; so I guess it’s bugged.
) below.
) to up-vote the contribution!
