Key Concepts

Review core concepts you need to learn to master this subject

Grid Template Columns

#grid-container { display: grid; width: 100px; grid-template-columns: 20px 20% 60%; }

To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels(px) or percentages(%).

Grid Essentials
Lesson 1 of 2
  1. 1
    Using CSS, you can elegantly lay out elements on a web page. There is no simple answer for how best to do this—depending on what content you are trying to display, multiple different techniqu…
  2. 2
    To set up a grid, you need to have both a grid container and grid items. The grid container will be a parent element that contains grid items as children and applies overarching styling and pos…
  3. 3
    By default, grids contain only one column. If you were to start adding items, each item would be put on a new row; that’s not much of a grid! To change this, we need to explicitly define the number…
  4. 4
    We’ve learned how to define the number of columns in our grid explicitly. To specify the number and size of the rows, we are going to use the property grid-template-rows. This property is almost i…
  5. 5
    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 { displ…
  6. 6
    You may already be familiar with several types of responsive units such as percentages (%), ems and rems. CSS Grid introduced a new relative sizing unit — fr, like fraction. By using the f…
  7. 7
    The properties that define the number of rows and columns in a grid can take a function as a value. repeat() is one of these functions. The repeat() function was created specifically for CSS Grid. …
  8. 8
    So far, all of the grids that we have worked with have been a fixed size. The grid in our example has been 400 pixels wide and 500 pixels tall. But sometimes you might want a grid to resize based o…
  9. 9
    In all of our grids so far, there hasn’t been any space between the items in our grid. The CSS properties grid-row-gap and grid-column-gap will put blank space between every row and column in the …
  10. 10
    In this lesson, we have learned how to define a grid container. When explicitly defining a grid, you have to declare the quantity of rows and columns and their respective sizes. In all of our exa…
  11. 11
    Using the CSS properties grid-row-start and grid-row-end, we can make single grid items take up multiple rows. Remember, we are no longer applying CSS to the outer grid container; we’re adding CSS …
  12. 12
    We can use the property grid-row as shorthand for grid-row-start and grid-row-end. The following two code blocks will produce the same output: .item { grid-row-start: 4; grid-row-end: 6; } .it…
  13. 13
    The previous three properties also exist for columns. grid-column-start, grid-column-end and grid-column work identically to the row properties. These properties allow a grid item to span multiple …
  14. 14
    We’ve already been able to use grid-row and grid-column as shorthand for properties like grid-row-start and grid-row-end. We can refactor even more using the property grid-area. This property will …
  15. 15
    At this point, we’ve covered a great deal of different ways to manipulate the grid and the items inside it to create interesting layouts. * grid-template-columns defines the number and sizes of t…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo