DEV Community

hey68you
hey68you

Posted on • Edited on

10 8

CSS Grid - Hanuka Candles Menora

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

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

* {
    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;
}
Enter fullscreen mode Exit fullscreen mode

And the .html

menora.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>
Enter fullscreen mode Exit fullscreen mode

For more learning and information, be sure to check out these links:

Happily Holidays!

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (3)

Collapse
 
hey68you profile image
hey68you

new link added

Collapse
 
thecodepixi profile image
Emmy | Pixi

This is awesome! I'm trying to get more practice with Grid so I'll definitely be playing with this. Would be a fun way to "light" a candle each night.

Collapse
 
hey68you profile image
hey68you • Edited

I published this to github pages for you enjoyment: hey68you.github.io/css3_grid_chanu...

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more