Side-bar Grid React

I'm currently working on a React project and I'm struggling to create a CSS grid layout that keeps the "side panel" visible at all times. Being new to React, I find myself a bit confused when it comes to properly stacking elements.

Here is the code snippet:

return (
\<div\>
\<Aside /\>
\<Header /\>
\<Hero /\>
\<Middle /\>
\<End /\>
\<Footer /\>
\</div\>
);
}

For the CSS styling:

body {
margin: 0;
position: relative;
background-color: beige;

display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: center;
align-content: center;

grid-template-areas:
"aside header header header"
"aside hero hero hero"
"aside middle-display middle-display middle-display"
"aside end-display end-display end-display"
"aside footer footer footer";

gap: 0px;
height: 100%;
width: 100%; }

I've experimented with wrapping it in different sections and divs, but still haven't achieved the desired outcome.

Here is the current result: And here is the desired design I am aiming for

Your assistance is greatly appreciated!

javascripthtmlcssreactjs

Answer №1

Check out this code snippet that perfectly achieves the desired structure:

body {
  margin: 0;
  background-color: beige;

  display: grid;

  grid-template-areas:
    "aside header header header header"
    "aside hero hero hero hero"
    "aside middle middle middle middle"
    "aside end end end end"
    "aside footer footer footer footer";

  height: 100vh;
  width: 100vw;
}

aside {
  background: grey;
  grid-area: aside;
}

header {
  background: blue;
  grid-area: header;
}


.section-one {
  background: red;
  grid-area: middle;
}

.section-two {
  background: orange;
  grid-area: end;
}

footer {
  background: royalblue;
  grid-area: footer;
}
<aside>Aside</aside>
<header>Header</header>
<section class="section-one">Section1</section>
<section class="section-two">Section2</section>
<footer>Footer</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid having gulp's uglify plugin remove es6 code

I've encountered an issue while using gulp babel to compile es6. It seems that uglify is stripping out my es6 code completely. Strangely, I'm not receiving any errors in my command line during the process. Have you faced this problem before? Any ...

javascriptgulpgulp-uglifygulp-babel

Stop the user from navigating away from the current page if any changes have not been saved, all within React without relying on

My project includes a panel that opens as a modal from right to left. This panel contains a left navigation menu with various options that, when clicked, display different components. These components primarily consist of forms, and my goal is to alert th ...

javascriptreactjsfrontend

The display of styles in Chrome Dev Tools is sporadically unreliable

While using the latest version of Google Chrome with no extensions enabled, I have encountered an issue. Occasionally, when I inspect an element, it works properly but other times it only shows this link: without displaying any styles or output. Restartin ...

cssgoogle-chromegoogle-chrome-devtools

Maintain selected values in a dropdown list that is generated dynamically

I am currently revamping an outdated webpage that pulls data from a database. My main objective is to implement the functionality to let users narrow down their search by selecting certain values. To achieve this, I have developed a dynamic dropdown list ...

phphtml

Guide on sending two dynamically generated select box values through ajax in order to retrieve values for a third select box

I am currently working on a task where I need to populate the 3rd select box based on the selections made in the first two select boxes, which have dynamic values. Below is the jQuery ajax code snippet that I have written (Please note that this code curre ...

javascriptphpjqueryajax

Display different form fields depending on the radio button selected by the user

As a beginner in JavaScript, I am facing a small issue. I have 4 entries, and another entry should open for each. It works fine for a and b inputs, but the problem arises with c and d inputs when there are more than 2 entries. I tried to solve it, but unfo ...

javascripthtmlformsinput

When the condition is fulfilled within an HTML document

I'm a novice in the world of django. Currently, I am working on creating a poll application using django. My aim is to show the message, 'you entered correct'. if selected_choice='Yellow' Below is the code snippet I am using: de ...

pythonhtmlcssif-statement

How to style CSS to ensure printed table content fits perfectly within the page

Does anyone know how to resize the contents of a table using CSS so that everything shows up when printing, without wrapping text in individual cells? In this scenario, <table class="datatables" id="table1"> <tr> <td style="white-space:nowr ...

htmlcssprintinghtml-table

Show another div once you've scrolled beyond the first

Instead of following tutorials that make a div appear after scrolling down a set number of pixels, I am looking to achieve something different. I want a div to appear when the user scrolls past another div, and then disappear again when they scroll back up ...

javascriptjqueryhtmlcssscroll

Disable the browser back button from navigating to the previous page when using a Modal or Dialog in the new NextJS app router

Currently, I am utilizing MUI, Typescript, Next.js, along with the new approuter. The desired functionality is to intercept the browser's back button action while a modal is open, so that it closes the modal instead of navigating back to the previous ...

reactjsnext.jsmaterial-uinext.js13app-router

Incorporate an external script into your Vue.js application

Seeking to integrate a simple JavaScript script with an external link to the library into my Vue.js application, I have encountered the following: <script type="text/javascript" src="https://my_site/index.js"></script> <link rel="styleshee ...

javascriptvue.js

Tips on implementing multiple consecutive setState calls in ReactJS

Recently, I discovered that setState is an async call. I'm facing an issue where I need to utilize the updated result from setState immediately after setting it, but due to its async nature, I end up getting the old state value. While researching for ...

javascriptreactjsreact-nativereact-hooks

Is there a significant distinction between value and defaultValue in React JS?

React's homepage features the final illustration (A Component Using External Plugins) with a textarea: <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> While typing, the ...

javascriptreactjs

Achieving consistent column widths in a Table with ReactJS and MaterialUI

My goal with ReactJS and MaterialUI is to ensure all columns in a Table have the same width. Surprisingly, without setting any specific widths, the last column always ends up narrower than the rest. To illustrate this issue, I created a sample on codesand ...

reactjshtml-tablematerial-ui

Difficulty achieving transformation of one div element within another div element

My aim is to create a unique hover effect for a button where it tilts slightly without affecting the text. You can view my progress here: https://codepen.io/kyannashanice/pen/QWveOMg I tried stacking the text and button in separate divs and triggering the ...

htmlcsstransform

The PHP HTML Heredoc encountered a parse error: unexpected syntax error, '"' is not expected

Currently, I am working on writing HTML code for a form inside my PHP block. Here is a snippet of the code: Add New Record in PostgreSQL Database .error {color: #FF0000;} <pre> $con= pg_connect("host=$host port= $port dbname=$db user=$user passwo ...

phphtml

Guide feature enhancer for an online platform

I am currently searching for a way to implement a "tutorial mode" using code or OS features similar to what is seen in mobile games. Essentially, after clicking a button, the user would enter a tutorial where the background darkens and each step highlights ...

css

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

I'm attempting to extract hover text content from plotly traces that have been shared online. This is a new type of scraping for me, and I'm exploring ways to accomplish this task in R without relying on selenium or phantomjs, possibly with the u ...

javascripthtmlrweb-scrapingrvest

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

After working on the provided code, I have managed to create a functionality where text from one textarea is copied to another textarea when a button is clicked using JavaScript. <head> <script type="text/javascript"> function displayOut(){ ...

javascripthtmlcss

Set a variable to store the loaded 3D object and receive an undefined value in return

I've been working on a function to load 3D objects using three.js. My goal is for this function to return the 3D object once it's loaded, but no matter what I try, I keep getting "undefined". function load3DObject(url, meshMaterial) { let mes ...

javascriptthree.jscallback