CSS Grid - Hanuka Candles Menora
Tags: javascript, webdev, css
Published: 2018-12-02 08:02:51

---
title: CSS Grid - Hanuka Candles Menora
published: true
description: Learning CSS Grid in the holiday season
tags: #javascript #webdev #css
---

Hello Everyone and Seasons Greetings...

Sometimes you just need a creative push to dive into the new features of CSS3.  For example, the new CSS3 Grid layout system is really amazing (even when you already know and are using the flexbox layout... and of course these 2 systems can work together nicely).  Just wanted to share the results of my learning with the web development world :)

I think one of the coolest things about CSS Grid is how it simplifies responsive layout without the need for using media queries in many cases.

*__Screen shot__*
--
![Screen Shot](https://thepracticaldev.s3.amazonaws.com/i/ed6p3l80mu82gqrk35x9.png)

So, here's my Chanuka Menora code:

*As an exercise, please try to re-create this using  grid-template-areas (a.k.a. 'named areas' and post the results here)*

*__menora.css__*
--

``` css
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #6f6758;
}

.toprow {

}

.flame {
    height: 16px;
    width: 8px;
    background: linear-gradient(orange, red  18px);
    align-self: end;
    justify-self: center;  
    grid-row: 2/3;  
}

#flame_5_center {
    grid-column: 5/6;
    grid-row: 1/2;
}

.cup {
    height: 40px;
    width: 34px;
    background-color: rgb(230, 200, 34);    
    align-self: start;
    justify-self: center;  
    grid-row: 3/4;  
    border: black 1px solid;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#cup_5_center {
    grid-column: 5/6;
    grid-row: 2/3;
}

.sphere {
    grid-row: 4/5;
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 48px solid #929faa;
    align-self: start;
    justify-self: center;
}

#sphere_5_center {
    grid-column: 5/6;
    grid-row: 3/4;
}

.stick {
    height: 100%;
    width: 8px;
    background-color: #929faa;
    align-self: start;
    justify-self: center;  
    grid-row: 5/6;  
}

#stick_5_center {
    grid-column: 5/6;
    visibility: hidden;
}

.crossbar {
    height: 16px;
    background-color: #929faa;
    grid-row: 6/7;
    grid-column: 2/9; 
}

.left {
    height: 16px;
    background-color: #929faa;
    grid-column: 1/2;
    width: calc(50% + 4px);
    justify-self: right;
    border-bottom-left-radius: 10px;
}

.right {
    height: 16px;
    background-color: #929faa;
    grid-column: 9/10;
    width: calc(50% + 4px);
    justify-self: left;
    grid-row: 6/7;
    border-bottom-right-radius: 10px;
}

.shaft {
    grid-column: 5/6;
    width: 8px;
    background-color: #929faa;
    justify-self: center;  
    grid-row: 4/9;
}

.base {
    grid-row: 8/9;
    align-self: end;
    justify-self: center;
    grid-column: 5/6;

    width: 0;
    height: 0;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    border-bottom: 80px solid #929faa;
}

.grid {
    display: grid;
    padding: 20px;
    height: 100vh;
    width: 100vw;

    grid-template-columns: repeat(9, minmax(33px, 1fr));
    grid-template-rows: repeat(6, 40px) 1fr;
}
```

And the .html

*__menora.html__*
--

``` html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="menora.css">
    <title>CSS-Grid-Chanuka</title>
  </head>
  <body>
    <div id="root" class="grid">
      <div id="top_clear_row"  class="toprow"></div>
      <div id="flame_1"        class="flame"></div>
      <div id="flame_2"        class="flame"></div>
      <div id="flame_3"        class="flame"></div>
      <div id="flame_4"        class="flame"></div>
      <div id="flame_5_center" class="flame"></div>
      <div id="flame_6"        class="flame"></div>
      <div id="flame_7"        class="flame"></div>
      <div id="flame_8"        class="flame"></div>
      <div id="flame_9"        class="flame"></div>

      <div id="cup_1"          class="cup"></div>
      <div id="cup_2"          class="cup"></div>
      <div id="cup_3"          class="cup"></div>
      <div id="cup_4"          class="cup"></div>
      <div id="cup_5_center"   class="cup"></div>
      <div id="cup_6"          class="cup"></div>
      <div id="cup_7"          class="cup"></div>
      <div id="cup_8"          class="cup"></div>
      <div id="cup_9"          class="cup"></div>

      <div id="sphere_1"         class="sphere"></div>
      <div id="sphere_2"         class="sphere"></div>
      <div id="sphere_3"         class="sphere"></div>
      <div id="sphere_4"         class="sphere"></div>
      <div id="sphere_5_center"  class="sphere"></div>
      <div id="sphere_6"         class="sphere"></div>
      <div id="sphere_7"         class="sphere"></div>
      <div id="sphere_8"         class="sphere"></div>
      <div id="sphere_9"         class="sphere"></div>

      <div id="stick_1"         class="stick"></div>
      <div id="stick_2"         class="stick"></div>
      <div id="stick_3"         class="stick"></div>
      <div id="stick_4"         class="stick"></div>
      <div id="stick_5_center"  class="stick"></div>
      <div id="stick_6"         class="stick"></div>
      <div id="stick_7"         class="stick"></div>
      <div id="stick_8"         class="stick"></div>
      <div id="stick_9"         class="stick"></div>

      <div id="crossBarL" class="left"></div>
      <div id="crossBar" class="crossbar"></div>
      <div id="crossBarR" class="right"></div>
      
      <div id="baseId" class="base"></div>

      <div id="shaftId" class="shaft"></div>

    </div>
  </body>
</html>
```

For more learning and information, be sure to check out these links:
- https://labs.jensimmons.com/
- https://gridbyexample.com/
- [LayoutLand](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)
- http://www.csstutorial.org/css-grid-tutorial.html

Happily Holidays!