diff --git a/Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt b/Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt
new file mode 100644
index 0000000000..19ec62190a
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt
@@ -0,0 +1,5 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+ BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline
+ BlockContainer
at (8,8) content-size 784x100 children: not-inline
+ Box at (8,8) content-size 784x100 [GFC] children: not-inline
+ BlockContainer at (8,8) content-size 200x100 [BFC] children: not-inline
diff --git a/Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html b/Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html
new file mode 100644
index 0000000000..8b9c7a4475
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index c88535c806..d4517c0615 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -6869,6 +6869,14 @@ ErrorOr> Parser::parse_grid_area_shorthand_value(Vector> Parser::parse_grid_shorthand_value(Vector const& component_value)
+{
+ // <'grid-template'> |
+ // FIXME: <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
+ // FIXME: [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+ return parse_grid_track_size_list_shorthand_value(component_value);
+}
+
ErrorOr> Parser::parse_grid_template_areas_value(Vector const& component_values)
{
Vector> grid_area_rows;
@@ -7076,6 +7084,10 @@ Parser::ParseErrorOr> Parser::parse_css_value(Property
if (auto parsed_value = FIXME_TRY(parse_grid_track_placement(component_values)))
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
+ case PropertyID::Grid:
+ if (auto parsed_value = FIXME_TRY(parse_grid_shorthand_value(component_values)))
+ return parsed_value.release_nonnull();
+ return ParseError::SyntaxError;
case PropertyID::GridTemplate:
if (auto parsed_value = FIXME_TRY(parse_grid_track_size_list_shorthand_value(component_values)))
return parsed_value.release_nonnull();
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
index 0d3f744a26..6943ab0e0a 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
@@ -334,6 +334,7 @@ private:
ErrorOr> parse_grid_track_placement_shorthand_value(Vector const&);
ErrorOr> parse_grid_template_areas_value(Vector const&);
ErrorOr> parse_grid_area_shorthand_value(Vector const&);
+ ErrorOr> parse_grid_shorthand_value(Vector const&);
ErrorOr> parse_a_calculation(Vector const&);
diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
index ea485deaba..d030544efa 100644
--- a/Userland/Libraries/LibWeb/CSS/Properties.json
+++ b/Userland/Libraries/LibWeb/CSS/Properties.json
@@ -940,6 +940,21 @@
"string"
]
},
+ "grid": {
+ "inherited": false,
+ "initial": "auto",
+ "valid-identifiers": [
+ "auto"
+ ],
+ "valid-types": [
+ "length",
+ "percentage",
+ "string"
+ ],
+ "longhands": [
+ "grid-template"
+ ]
+ },
"grid-template": {
"inherited": false,
"initial": "auto",
diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
index 8db216d532..f666efcfac 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -639,7 +639,7 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return;
}
- if (property_id == CSS::PropertyID::GridTemplate) {
+ if (property_id == CSS::PropertyID::GridTemplate || property_id == CSS::PropertyID::Grid) {
if (value.is_grid_track_size_list_shorthand()) {
auto const& shorthand = value.as_grid_track_size_list_shorthand();
style.set_property(CSS::PropertyID::GridTemplateAreas, shorthand.areas());