Learn CSS: Grid

In this course, you will master a technology that was recently added to CSS! This is a long-awaited improvement to laying-out and positioning elements on web pages.

Start[missing "en.views.course_landing_page.learn-css.course_illustration" translation]
Chevron Left Icon
CSS Grid Essentials
Lesson 1 of 2
Chevron Right Icon
  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 techni...

  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 [...] . This property is almost identical to...

  5. 5

    The property [...] can replace the previous two CSS properties. Both [...] and [...] are nowhere to be found in the following code! [...] When using [...] , the values before the slash wi...

  6. 6

    You may already be familiar with several types of responsive units such as percentages ( [...] ), [...] s and [...] s. CSS Grid introduced a new relative sizing unit — [...] , like fracti...

  7. 7

    The properties that define the number of rows and columns in a grid can take a function as a value. [...] is one of these functions. The [...] 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 [...] and [...] will put blank space between every row and column in the grid. [...]...

  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 [...] and [...] , 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 to the eleme...

  12. 12

    We can use the property [...] as shorthand for [...] and [...] . The following two code blocks will produce the same output: [...] [...] This code should look similar to the way [...] is...

  13. 13

    The previous three properties also exist for columns. [...] , [...] and [...] work identically to the row properties. These properties allow a grid item to span multiple columns. When using t...

  14. 14

    We've already been able to use [...] and [...] as shorthand for properties like [...] and [...] . We can refactor even more using the property [...] . This property will set the starting an...

  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. * [...] defines the number and sizes of the columns of ...

  1. 1

    In the previous lesson, you learned all the foundational properties necessary to create a two-dimensional grid-based layout for your web pages! In this lesson, you'll learn the following additional...

  2. 2

    The [...] property allows you to name sections of your web page to use as values in the [...] , [...] , [...] , [...] , and [...] properties. [...] [...] You may want to expand this ...

  3. 3

    Another powerful feature of CSS Grid Layout is the ability to easily overlap elements. When overlapping elements, it is generally easiest to use grid line names and the [...] property. [......

  4. 4

    We have referred to "two-dimensional grid-based layout" several times throughout this course. There are two axes in a grid layout — the column (or block) axis and the row (or inline) ax...

  5. 5

    In the previous exercise, we learned how to position elements within their columns. In this exercise, we will learn how to position a grid within its parent element. We can use [...] to positio...

  6. 6

    In the previous two exercises, we learned how to position grid items and grid columns from left to right across the page. Below, we'll learn how to position grid items from top to bottom! [...] ...

  7. 7

    In the previous exercise, we positioned grid items within their rows. [...] positions the rows along the column axis, or from top to bottom. It accepts these positional values: * [...] &md...

  8. 8

    The [...] and [...] properties specify how all grid items contained within a single container will position themselves along the row and column axes, respectively. [...] specifies how an i...

  9. 9

    So far, we have been explicitly defining the dimensions and quantities of our grid elements using various properties. This works well in many cases, such as a landing page for a business that will ...

  10. 10

    CSS Grid provides two properties to specify the size of grid tracks added implicitly: [...] and [...] . [...] specifies the height of implicitly added grid rows. [...] specifies the width...

  11. 11

    In addition to setting the dimensions of implicitly-added rows and columns, we can specify the order in which they are rendered. [...] specifies whether new elements should be added to rows or ...

  12. 12

    Great work! You have learned many new properties to use when creating a layout using CSS Grid! Let's review: [...] specifies grid named grid areas grid layouts are two-dimensional: they hav...

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

Learn CSS: Grid

Start[missing "en.views.course_landing_page.learn-css.course_illustration" translation]