CSS Grid Essentials
Grid Template

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



Let’s refactor our grid using grid-template. Don’t use grid-template-rows and grid-template-columns, but keep the rows and columns looking the same!

Folder Icon

Take this course for free

Already have an account?