From 0c1fcf534d6b8197d968dc5c854a3c0053b63470 Mon Sep 17 00:00:00 2001
From: The Coding Aviator <34807532+thecodingaviator@users.noreply.github.com>
Date: Sat, 9 Mar 2019 19:22:20 +0530
Subject: [PATCH] Added solution to Use grid-area Without Creating an Areas
 Template (#34851)

* Update index.md

* Added full solution

* Update index.md

* Update index.md
---
 .../index.md                                  | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md b/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md
index 647fc6975a..c9913f8d31 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md
@@ -3,8 +3,41 @@ title: Use grid-area Without Creating an Areas Template
 ---
 ## Use grid-area Without Creating an Areas Template
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Hint
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+The `grid-area` takes values in the following format `horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at`.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+### Solution
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  
+  .item5 {
+    background: PaleGreen;
+    grid-area: 3/1/4/4;
+  }
+  
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+  
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```