diff --git a/ora11/grid-puzzle/index.html b/ora11/grid-puzzle/index.html
new file mode 100644
index 0000000..e9e44da
--- /dev/null
+++ b/ora11/grid-puzzle/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ora11/grid-puzzle/puzzle.css b/ora11/grid-puzzle/puzzle.css
new file mode 100644
index 0000000..c9c895b
--- /dev/null
+++ b/ora11/grid-puzzle/puzzle.css
@@ -0,0 +1,107 @@
+.coral{
+ background-color: coral;
+}
+
+.lavender{
+ background-color: lavender;
+}
+
+.lightgreen{
+ background-color: lightgreen;
+}
+
+.pink{
+ background-color: pink;
+}
+
+.yellow{
+ background-color: yellow;
+}
+
+.plum{
+ background-color: plum;
+}
+
+#grid > div::before{
+ content: attr(class);
+}
+
+body{
+ display: flex;
+ align-items: center;
+ height: 100vh;
+ justify-content: center;
+ margin: 0;
+ font-family: sans-serif;
+}
+
+#grid{
+ aspect-ratio: 4 / 5;
+ border: 4px solid #555;
+ box-sizing: border-box;
+ height: 50vh;
+ background-color: #ddd;
+ display: grid;
+ grid-template-areas:
+ "A A A B" /* 1. sor*/
+ "C C D E" /*2. sor*/
+ "F . G E" /*3. sor*/
+ "F H H E" /*4. sor*/
+ "I J J K"; /*5.sor*/
+ grid-template-columns: repeat(4, 1fr); /* 4 fele osztja az oszlopokat*/
+ grid-template-rows: repeat(5, 1fr);
+ gap: 4px;
+ padding: 4px;
+}
+
+#grid > div{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.5em;
+ border: 2px solid #555;
+}
+
+#lavender{
+ grid-area: A;
+}
+
+#yellow1{
+ grid-area: B;
+}
+
+#lightgreen1{
+ grid-area: C;
+}
+
+#yellow2{
+ grid-area: D;
+}
+
+#pink{
+ grid-area: E;
+}
+
+#plum{
+ grid-area: F;
+}
+
+#yellow3{
+ grid-area: G;
+}
+
+#lightgreen2{
+ grid-area: H;
+}
+
+#coral{
+ grid-area: I;
+}
+
+#lightgreen3{
+ grid-area: J;
+}
+
+#yellow4{
+ grid-area: K;
+}
\ No newline at end of file