Key Concepts

Review core concepts you need to learn to master this subject

Grid Template Columns

fr Relative Unit

Grid Gap

CSS Block Level Grid

CSS grid-row

CSS Inline Level Grid

minmax() Function

grid-row-start & grid-row-end

See more

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(%).

CSS Grid Essentials
Lesson 1 of 2
  1. 1
    Introduction to Grids
    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 techni…
    Start
  2. 2
    Creating a Grid
    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…
    Start
  3. 3
    Creating Columns
    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…
    Start
  4. 4
    Creating Rows
    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…
    Start
  5. 5
    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; …
    Start
  6. 6
    Fraction
    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…
    Start
  7. 7
    Repeat
    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. …
    Start
  8. 8
    minmax
    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…
    Start
  9. 9
    Grid Gap
    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 …
    Start
  10. 10
    Grid Items
    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…
    Start
  11. 11
    Multiple Row Items
    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 …
    Start
  12. 12
    Grid Row
    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…
    Start
  13. 13
    Grid Column
    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 …
    Start
  14. 14
    Grid Area
    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 …
    Start
  15. 15
    Review
    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…
    Start

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