The shorthand property, grid-template, can replace the previous two CSS properties. Both grid-template-rows and grid-template-columns are nowhere to be found in the following code!

.grid { display: grid; width: 1000px; height: 500px; grid-template: 200px 300px / 20% 10% 70%; }

When using grid-template, the values before the slash will determine the size of each row. The values after the slash determine the size of each column. In this example, we’ve made two rows and three columns of varying sizes.

The same rules from before apply; when using percentages to set rows, each row will be a percentage of the grid’s total height. Columns are still a percentage of the total width.



Refactor the grid template rows and columns code inside the .grid ruleset using the grid-template property. Keep the rows and columns looking the same without using the grid-template-rows and grid-template-columns properties!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?