diff --git a/components/style/properties/shorthand/position.mako.rs b/components/style/properties/shorthand/position.mako.rs
index 5a0e2ebecdf1..e653365273ef 100644
--- a/components/style/properties/shorthand/position.mako.rs
+++ b/components/style/properties/shorthand/position.mako.rs
@@ -177,6 +177,70 @@
 </%helpers:shorthand>
 % endfor
 
+<%helpers:shorthand name="grid-area"
+                    sub_properties="grid-row-start grid-row-end grid-column-start grid-column-end"
+                    spec="https://drafts.csswg.org/css-grid/#propdef-grid-area"
+                    products="gecko">
+    use values::specified::GridLine;
+    use parser::Parse;
+
+    // The code is the same as `grid-{row,column}` except that this can have four values at most.
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
+        fn line_with_ident_from(other: &GridLine) -> GridLine {
+            let mut this = GridLine::default();
+            if other.integer.is_none() && !other.is_span {
+                this.ident = other.ident.clone();
+            }
+
+            this
+        }
+
+        let row_start = input.try(|i| GridLine::parse(context, i))?;
+        let (column_start, row_end, column_end) = if input.try(|i| i.expect_delim('/')).is_ok() {
+            let column_start = GridLine::parse(context, input)?;
+            let (row_end, column_end) = if input.try(|i| i.expect_delim('/')).is_ok() {
+                let row_end = GridLine::parse(context, input)?;
+                let column_end = if input.try(|i| i.expect_delim('/')).is_ok() {
+                    GridLine::parse(context, input)?
+                } else {        // grid-column-end has not been given
+                    line_with_ident_from(&column_start)
+                };
+
+                (row_end, column_end)
+            } else {        // grid-row-start and grid-column-start has been given
+                let row_end = line_with_ident_from(&row_start);
+                let column_end = line_with_ident_from(&column_start);
+                (row_end, column_end)
+            };
+
+            (column_start, row_end, column_end)
+        } else {        // only grid-row-start is given
+            let line = line_with_ident_from(&row_start);
+            (line.clone(), line.clone(), line)
+        };
+
+        Ok(Longhands {
+            grid_row_start: row_start,
+            grid_row_end: row_end,
+            grid_column_start: column_start,
+            grid_column_end: column_end,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            self.grid_row_start.to_css(dest)?;
+            let values = [&self.grid_column_start, &self.grid_row_end, &self.grid_column_end];
+            for value in &values {
+                dest.write_str(" / ")?;
+                value.to_css(dest)?;
+            }
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
 <%helpers:shorthand name="place-content" sub_properties="align-content justify-content"
                     spec="https://drafts.csswg.org/css-align/#propdef-place-content"
                     products="gecko" disable_when_testing="True">