Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
    <div class="containerGrid">
        <div class="sideBar">
            <nav id="navbar">
                <header><h1><a class="nav-link-home" href="#Intro">CSS Grid Short Guide</a></h1>
                </header>
                <div class="navMenu">
                    <button class="menu-btn">Menu</button>
                    <ul>
                        <li><a class="nav-link" href="#Intro">Intro</a></li>
                        <li><a class="nav-link" href="#Grid_Layout">Grid Layout</a></li>
                        <li><a class="nav-link" href="#Grid_Design">Grid Design</a></li>
                        <li><a class="nav-link" href="#Grid_Elements">Grid Elements</a></li>
                        <li><a class="nav-link" href="#Grid_Container">Grid Container</a></li>
                        <li><a class="nav-link" href="#Grid_Template_Explicit"> Grid Template Explicit</a></li>
                        <li><a class="nav-link" href="#Grid_Template_Implicit"> Grid Template Implicit</a></li>
                        <li><a class="nav-link" href="#Grid_Justification_and_Alignment">Grid Justification and Alignment</a></li>
                        <li><a class="nav-link" href="#Grid_Items_Positioning"> Grid Items Positioning</a></li>
                        <li><a class="nav-link" href="#Grid_Items_Justification_and_Alignment">Grid Items Justification and Alignment</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="mainContent">
            <main id="main-doc">
                <section class="main-section" id="Intro">
                    <header>
                        <h1><a class="sectionTitle" href="#Intro">Intro</a></h1>
                    </header>
                    <p>CSS Grid Layout (aka “Grid” or “CSS Grid”) is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.</p>
                    <p>Disclaimer</p>
                    <p>Resources used creating this technical documentation:</p>
                    <ul>
                        <li><a class="linkResource" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" target="_blank" >Mozilla MDN Web Docs Section about Grid</a></li>
                        <li><a class="linkResource" href="https://www.w3schools.com/css/css_grid.asp" target="_blank" >W3 Schools Section about Grid</a></li>
                        <li><a class="linkResource" href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" >CSS Tricks Guide to Grid</a></li>
                        <li><a class="linkResource" href="https://www.hongkiat.com/blog/css-grid-layout-fr-unit/" target="_blank" >Honkiat Guide to CSS Grid Layout Fr Unit</a></li>
                    </ul>
                    <hr>
                </section>
                <section class="main-section" id="Grid_Layout">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Layout">Grid Layout</a></h1>
                    </header>
                    <p>Grid Layout controls the layout of its content through the use of a <i>grid</i>: an intersecting set of horizontal and vertical lines which create a sizing and positioning coordinate system for the grid container’s contents.</p>
                        <p>Grid Layout features</p>
                            <ul>
                                <li>fixed, flexible, and content-based track sizing functions</li>
                                <li>explicit item placement via forwards (positive) and backwards (negative) numerical grid coordinates, named grid lines, and named grid areas; automatic item placement into empty areas, including reordering with order</li>
                                <li>space-sensitive track repetition and automatic addition of rows or columns to accommodate additional content</li>
                                <li>control over alignment and spacing with margins, gutters, and the alignment properties</li>
                                <li>the ability to overlap content and control layering with z-index</li>
                            </ul>
                            <p>Grid containers can be nested or mixed with flex containers as necessary to create more complex layouts</p>
                        <hr>
                </section>
                <section class="main-section" id="Grid_Design">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Design">Grid Design</a></h1>
                    </header>
                    <p>First thing first - you need to know what you want and need for your required / wanted web page layout.</p>
                    <p>Basic steps to achieve that</p>
                    <ul>
                        <li><h4><b>Create the layout </b></h4><p>You can use pen and paper or any design software. You need to make it rough with simple naming, eg. header; main content; sidebar; ads sections; footer and anyting else you need depending on the <b>content</b> you need to present. Make several versions of the design for different type of screens. How would you like it to look on phone/ tablet/ TV.</p></li>
                        <li><h4><b>Write your content in HTML</b></h4><p>Now you need to transfer your content to HTML. Use HTML tags such as <i>main section div</i> as building blocks for your layout. Now use previous naming (header; main content and so on) to declare CSS classes for those blocks. </p></li>
                        <li><h4><b>Define your layout items names</b></h4><p>What I mean by that is you need to define layout item (header; main content and so on) as grid areas. Later you will use those names as areas to set where everything goes inside the grid.</p></li>
                        <li><h4><b>Define your grid </b></h4><p>Once you have your content inside HTML and set the basic naming, define the grid using CSS properties</p></li>
                        <li><h4><b>Define the grid container </b></h4><p>You need to define/style your grid container. Is it the whole page? Is it just part of page? How the items are placed? How much space do they take? Adjust HTML and CSS appropriately.</p></li>
                        <li><h4><b>Define grid items </b></h4><p>Now you need to define/style your <i>grid</i> items. Where are they going to be put inside the grid? How much space they would take inside the grid? Again, adjust HTML and CSS appropriately.</p></li>
                        <li><h4><b>Add basic styling</b></h4><p>Adjust the styling in CSS to make it look closer to the design imagined.</p></li>
                        <li><h4><b>MAKE IT RESPONSIVE!</b></h4><p>Now it is time to make the webpage responsive. Make use of grid flow properties add media queries as necessary.</p></li>
                        <li><h4><b>Fine tune the styling and add the magic</b></h4><p>Let your creative self go! Add all needed or wanted styling and animation!</p></li>
                    </ul>
                    <p>The following sections are presented as reference for CSS Grid</p>
                    <hr>
                </section>
                <section class="main-section" id="Grid_Elements">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Elements">Grid Elements</a></h1>
                    </header>
                   <div class="sectionFlex">
                    <div class="textBlock">
                        <p>A grid layout consists of a parent element, with one or more child elements.</p>
                        <code class="codeSample">
    &lt;div class="grid-container">
        &lt;div class="grid-item">1.&lt;/div>
        &lt;div class="grid-item">2.&lt;/div>
        &lt;div class="grid-item">3.&lt;/div>
        &lt;div class="grid-item">4.&lt;/div>
        &lt;div class="grid-item">5.&lt;/div>
        &lt;div class="grid-item">6.&lt;/div>
    &lt;/div>
                </code>
                    </div>
                    <div class="imgBox">
                        <img src="https://assets.hongkiat.com/uploads/css-grid-layout-fr-unit/basic-usage.jpg" alt="Grid example">
                        <!-- https://www.hongkiat.com/blog/css-grid-layout-fr-unit/ -->
                    </div>
                   </div>
                   <div>
                       <h2><b>Terminology</b></h2>
                       <ul>
                           <li><h3><b>Grid Container</b></h3><p>An HTML element on which <i>display:grid</i> is applied.</p> </li>
                           <li><h3><b>Grid Item</b></h3><p><i>Direct</i> descendents of the grid container.</p></li>
                           <li><h3><b>Grid line</b></h3><p>The dividing lines that make up the structure of the grid.</p></li>
                           <li><h3><b>Grid Cell</b></h3><p>The space between two adjacent column and two adjacent row lines. </p></li>
                           <li><h3><b>Grid Track</b></h3><p>The space between two adjacent grid lines. In other words, simply rows or columns.</p></li>
                           <li><h3><b>Grid Area</b></h3><p>The space defined by four grid lines.A grid area can be composed of any number of grid cells.</p></li>
                       </ul>
                   </div>
                   <hr>
                </section>
                <section class="main-section" id="Grid_Container">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Container">Grid Container</a></h1>
                    </header>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <p>Display Property</p>
                            <p>An HTML element becomes a grid container when its display property is set to <i>grid</i> or <i>inline-grid</i>.</p>
                        </div>
                        <div class="codeBlock">
                        <code class="codeSample">
    .container {
        display: grid;
        }
        .container {
        display: inline-grid;
        }
                        </code>
                        </div>
                    </div>
                   <hr>
                </section>
                <section class="main-section" id="Grid_Template_Explicit">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Template_Explicit">Grid Template Explicit</a></h1>
                    </header>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Rows and Columns</h3>
                            <p>Defines grid columns and rows using <i>grid-template-row</i> and <i>grid-template-column</i>. Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. Values inside brackets is the naming of column/row line. Track size accepts these values: <i>length units; auto; minmax(lower value;upper value); repeat(amount; length); min-content; max-content;</i>. Line names can be the same.</p>
                        </div>
                        <div class="codeBlock" >
                            <code class="codeSample">
    .container {
        grid-template-columns: [first] 40px [second] 50px [line3] auto [col4-start] 50px [five] 40px [end];
        grid-template-rows: [row1-start] 25% [row1-end] 100px [line3] auto [last-line];
    }
                            </code>
                        </div>
                    </div>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Template - Areas</h3>
                            <p><i>grid-template-area.</i> Defines a grid template by referencing the names of the grid areas which are specified with the <i>grid-area</i> property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid</p>
                            <div class="codeBlockSmaller">
                                <code class="codeSample">
    .item-a {
        grid-area: header;
        }
        .item-b {
        grid-area: main;
        }
        .item-c {
        grid-area: sidebar;
        }
        .item-d {
        grid-area: footer;
        }

    .container {
        display: grid;
        grid-template-columns: 50px 50px 50px 50px;
        grid-template-rows: auto;
        grid-template-areas:
            "header header header header"
            "main main . sidebar"
            "footer footer footer footer";
        }
                                </code>
                            </div>
                        </div>
                        <div class="imgBox"><img src="https://css-tricks.com/wp-content/uploads/2018/11/dddgrid-template-areas.svg" alt="Grid-template-area example"></div>
                    </div>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Template</h3>
                            <p><i>grid-template</i> is a shorthand for setting <i>grid-template-rows</i>, <i>grid-template-columns</i>, and <i>grid-template-areas</i> in a single declaration</p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .container {
        grid-template:
            [row1-start] "header header header" 25px [row1-end]
            [row2-start] "footer footer footer" 25px [row2-end]
            / auto 50px auto;
        }
    is the same as: 
    
    .container {
        grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
        grid-template-columns: auto 50px auto;
        grid-template-areas: 
            "header header header" 
            "footer footer footer";
        }
                            </code>
                        </div>
                    </div>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Gaps</h3>
                            <p><i>row-gap</i>, <i>column-gap</i> and their's shorthand <i>gap</i> determines the size of the grid lines or in other words width between of the gutters between the columns/rows. <i>The gutters are created only between columns/row not on the outer edges</i></p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .container {
        grid-template:
            [row1-start] "header header header" 25px [row1-end]
            [row2-start] "footer footer footer" 25px [row2-end]
            / auto 50px auto;
        }
    is the same as: 
    
    .container {
        grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
        grid-template-columns: auto 50px auto;
        grid-template-areas: 
            "header header header" 
            "footer footer footer";
        }
                            </code>
                        </div>
                    </div>
                <div class="sectionFlex">
                    <div class="textBlock">
                        <h3>Grid shorthand</h3>
                        <p>A shorthand for setting all of the following properties in a single declaration: <i>grid-template-rows</i>, <i>grid-template-columns</i>, <i>grid-template-areas</i>, <i>grid-auto-rows</i>, <i>grid-auto-columns</i>, and <i>grid-auto-flow</i> (Note: You can only specify the explicit or the implicit grid properties in a single <i>grid</i> declaration). </p>
                    </div>
                    <div class="codeBlock">
                        <code class="codeSample">
    .container {
        grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
        }
    is the same as: 
    
    .container {
        grid-template-areas: 
            "header header header"
            "footer footer footer";
        grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
        grid-template-columns: auto 50px auto;    
        }
                        </code>
                    </div>
                </div>
                <hr>
                </section>
                <section class="main-section" id="Grid_Template_Implicit">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Template_Implicit">Grid Template Implicit</a></h1>
                    </header>
                    <div>
                        <h3>Brief overview</h3>
                        <p>If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid. The <i>grid-auto-rows and grid-auto-columns</i> properties give us control over the size of implicit tracks. For more information please read this <a class="linkResource" href="https://css-tricks.com/difference-explicit-implicit-grids/" target="_blank">CSS tricks article about the difference between explicit and implicit grid.</a> </p>
                    </div>
                    <hr> 
                </section>
                <section class="main-section" id="Grid_Justification_and_Alignment">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Justification_and_Alignment">Grid Justification and Alignment</a></h1>
                    </header>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Content</h3>
                            <p>You can align (<i>along horizontal axis of grid container</i>), justify (<i>along vertical axis of grid container</i>)  (shorthand for both <i>place</i>) the whole grid within grid container.</p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .container {
        align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
        }
    
    .container {
        justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
        }
        
    .container {
        place-content: align-content / justify-content;
        }
                            </code>
                        </div>
                    </div>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Items</h3>
                            <p>You can align (<i>along horizontal axis of grid track</i>), justify (<i>along vertical axis of grid track</i>)  (shorthand for both is <i>place</i>) the grid items within grid container.</p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .container {
        align-items: start | end | center | stretch ;    
        }
    
    .container {
        justify-items: start | end | center | stretch ;    
        }
        
    .container {
        place-items: align-item / justify-item;
        }
                            </code>
                        </div>
                    </div>
                    <hr>
                </section>
                <section class="main-section" id="Grid_Items_Positioning">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Items_Positioning">Grid Items Positioning</a></h1>
                    </header>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Items start | end with column/row start | end</h3>
                            <p><i>grid-column-start</i> <i>grid-column-end</i> <i>grid-row-start</i> <i>grid-row-end</i> Determines a grid item’s location within the grid by referring to specific grid lines.</p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .item {
        grid-column-start: &lt;number> | &lt;name> | span &lt;number> | span &lt;name> | auto;
        grid-column-end: &lt;number> | &lt;name> | span &lt;number> | span &lt;name> | auto;
        grid-row-start: &lt;number> | &lt;name> | span &lt;number> | span &lt;name> | auto;
        grid-row-end: &lt;number> | &lt;name> | span &lt;number> | span &lt;name> | auto;
        }
                            </code>
                        </div>
                    </div>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Items start | end with column/row shorthand </h3>
                            <p><i>grid-column</i> and grid-row is a shorthand for <i>grid-column-start</i> + <i>grid-column-end</i>, and <i>grid-row-start</i> + <i>grid-row-end</i>, respectively</p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .item {
        grid-column: &lt;start-line> / &lt;end-line> | &lt;start-line> / span &lt;value>;
        grid-row: &lt;start-line> / &lt;end-line> | &lt;start-line> / span &lt;value>;
        }
                            </code>
                        </div>
                    </div>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Items positioning with grid area </h3>
                            <p>Gives an item a name so that it can be d by a template created with the g<i>rid-template-areas</i> property. Alternatively, this property can be used as an even shorter shorthand for <i>grid-row-start</i> + <i>grid-column-start</i> + <i>grid-row-end</i> + <i>grid-column-end</i>.</p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .item {
        grid-area: &lt;name> | &lt;row-start> / &lt;column-start> / &lt;row-end> / &lt;column-end>;
        }
                            </code>
                        </div>
                    </div>
                </section>
                <hr>
                <section class="main-section" id="Grid_Items_Justification_and_Alignment">
                    <header>
                        <h1><a class="sectionTitle" href="#Grid_Items_Justification_and_Alignment">Grid Items Justification and Alignment</a></h1>
                    </header>
                    <div class="sectionFlex">
                        <div class="textBlock">
                            <h3>Items</h3>
                            <p>You can align (<i>along horizontal axis of grid cell</i>), justify (<i>along vertical axis of the grid cell</i>)  (shorthand for both is <i>place</i>) the grid item within the grid cell.</p>
                        </div>
                        <div class="codeBlock">
                            <code class="codeSample">
    .item {
        align-self: start | end | center | stretch ;    
        }
    
    .item {
        justify-self: start | end | center | stretch ;    
        }
        
    .item {
        place-self: align-self / justify-self;
        }
                            </code>
                        </div>
                    </div>
                    <hr>
                </section>
                <div class="backTotop">
                <a href="#Intro"><img src="https://image.flaticon.com/icons/png/512/72/72436.png" alt="Back to top image"> </a>
                </div>
            </main>
        </div>
    </div>
</body>
              
            
!

CSS

              
                /* Global  */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} 

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Hind Siliguri", sans-serif;
    font-size: 1rem;
}

ul {
    padding-left: 1.5em;
}

p { 
    text-align: justify;
}

/* Grid area declarations. Grid area property assigns name to item  */
.sideBar { grid-area: sidebar;}
.mainContent { grid-area: mainContent;}

/* Grid container declarations. Set grid, layout, sizes.  */
.containerGrid {
    display: grid; 
    grid-template-columns: 25% 1fr;
    grid-template-areas: "sidebar mainContent";
    height: 100vh;
    padding: 0 2vw 0 2vw;
    gap: 0 2rem;

}
/* Sidebar lock, styling */
.sideBar {
    position: fixed;
    grid-column: 1;
    background-color: rgb(245, 245, 245);
    padding: 1rem;
    border-radius: 0 0.4em 0.4em 0;
    height: 100%;
    width: 25%;
    box-shadow: 0.3em 0.9em 10px rgb(179, 180, 180);
}

@media screen and (max-width: 800px) {
    .sideBar {
        border-radius: 0 0 0.4em 0.4em;
        margin-right: 1rem;
        width: 100%;
    }
}
/* NAVIGATION STYLING */
.navMenu {
    display: flex;
}

.navMenu > ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-left: 0;
}

.navMenu > ul > li {
    padding: 0.35em;
    margin: 0.1em 0;
    height: 100%;
    width: 100%;
}

.navMenu > ul > li > a {
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.2s;
    display: inline-block;
	position: relative;
}

/* UNDERLINE ANIMATION START */
.navMenu > ul > li > a:after {
	content: '';
	display: block;
	margin: auto;
	height: 2px;
	width: 0px;
	background: transparent;
	transition: width .2s ease, background-image .2s ease;
}

.navMenu > ul > li > a:hover:after {
	width: 100%;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.navMenu > ul > li > a:hover {
    font-weight: bold;
}
 /* UNDERLINE ANIMATION END  */
.nav-link, .nav-link:visited  {
    color: black;
}

.nav-link-home {
    text-decoration: none;
    color: black;
}

.nav-link-home:visited {
    color: black;
}

/* NAVIGATION DROPDOWN MENU. NOT VISIBLE ON DESKTOP */
.navMenu button {
    display: none;
    font-family: inherit;
    background: none;
    text-decoration: none;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    margin: 0 1.5rem;
    padding: 0;
}
/* AT MEDIA PROPERTIES TO SET SIDEBAR AS TOP WITH DROPDOWN MENU */

@media screen and (max-width: 800px) {
    .navMenu button {
        display: flex;
        font-family: inherit;
        background: none;
        text-decoration: none;
        border: none;
        color: inherit;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
        margin: 0 1.5rem;
        padding: 0;
    }
    .navMenu {
        position: relative;
        margin: 0.3rem 1.8rem 0 0;
        padding: 0;
        border: none;
        width: 50%;
        display: flex;
        justify-content: flex-end;
    }
    .navMenu ul {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        list-style: none;
        height: auto;
        margin: 2rem 0;
        padding: 0;
        font-size: 1.2rem;
        border-radius: 50px!important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.4s ease;  
    }
    .navMenu li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: #b6b4b4;
        margin: 0;
        border-radius: 20px;
        overflow: visible;
    }
    .navMenu li:hover {
        background-color: #d4d4d4;
    }
    .navMenu button:focus + ul {
        opacity: 1;
        transform: translateY(0px);
        visibility: visible;
      }
    nav {
        display: flex;
        justify-content: space-between;
    }
    /* ADDS SPACE BEFORE SECTION HEADINGS TO ACCOMODATE HEADER WHILE USING SIDEMENU LINKS */
    h1::before {  
        display: block; 
        content: " "; 
        margin-top: -3rem; 
        height: 3rem; 
        visibility: hidden; 
        pointer-events: none;
      }
    }
/* Main content styling */
.mainContent {
    grid-column: 2;
    padding-left: 2em;
    padding-top: 1em;
    overflow: auto;
}

.main-section {
    padding-bottom: 2em;
}
#Grid_Layout > p > p > ul {
    list-style: circle !important;
} 
.sectionFlex {
    display: flex;
    flex-direction: row;
}

.imgBox > img {
    display: block;
    max-width: 100%;
    object-fit: cover;
    height: auto;
    padding-left: 1rem;
}

.imgBox {
    width: 50%;
}

.textBlock {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 50%;
    padding-bottom: 1rem;
}
.codeBlock {
    display: flex;
    width: 50%;
    text-align: left;
    align-items: center;
    justify-items: center;
    padding-left: 1rem;
    padding-bottom: 1rem;
}
.codeBlockSmaller {
    display: flex;
    width: 100%;
    text-align: left;
    align-items: center;
    justify-items: center;
    padding-left: 1rem;
}
/* Code samples */
.codeSample {
    display: block;
    text-align: left;
    width: max-content;
    white-space: pre-wrap;
    background-color: rgb(220, 220, 220);
    border-radius: 0.5rem;
}

pre {
    display: inline;
    
    height: 100%;
}

h3 {
    padding-bottom: 0.5rem;
}

/* Style for hr line */
hr {
    margin-top: 2em;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* links styling */
.linkResource {
    color: black;
}
.linkResource:hover {
    color: rgb(153, 152, 152);
    font-weight: 700;
    text-decoration: underline;
}
.linkResource:focus {
    color: rgb(153, 152, 152);
    font-weight: 700;
    text-decoration: underline;
}
.linkResource::after {
    content: "  (Opens in new tab)";
    font-style: italic;
    font-size: calc(initial - 10%);
    display: none;
}

.linkResource:hover::after {
    display: inline;
}

.sectionTitle {
    color:black;
}

.sectionTitle:hover {
    text-decoration: underline;
    text-decoration-color: rgb(153, 152, 152);
}
.sectionTitle::after {
    content: "  #";
    font-style: italic;
    display: none;
    color: rgb(153, 152, 152);
}

.sectionTitle:hover::after {
    display: inline-block;
}

/* back to top  */
.backTotop > a > img {
    width: 100%;
}

.backTotop {
    width: 50px;
    position: absolute;
    top: 90vh;
    right: 5vw;
}

.backTotop:hover {
    transform: scale(1.2);
}

@media screen and (max-width: 800px) { 
    .containerGrid {
        grid-template-columns: 1fr;
        grid-template-areas: "sidebar" "mainContent";
        gap: 2rem;

    }
    .sideBar {
        grid-row: 1;
        grid-column: unset;
        height: max-content;
        width: 100%;
    }

    .mainContent {
        grid-row: 2;
        grid-column: unset;
        padding-top: 3rem;
    }
    .main-section {
        top: 10rem;
    }
    .sectionFlex {
        flex-direction: column;
        justify-items: center;
        align-items: center;
    }

    .imgBox, .textBlock, .codeBlock {
        width: 80%;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console