CSS Grid Format

[alizezila]

Hello all! I'm back lol. Can anyone help me out on how to format these boxes correctly?
I created classes for each box and each buttons that'll fly to the map, but they're just in the wrong places

Here's how it looks now and the firefox grid display

and here's the corresponding code lol
CSS
`html, body {
padding: 5px;
}

body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(5px, auto); /* add rows for our header/footer */
grid-template-areas: "header header header" "description description description" "surveybuttons surveybuttons surveybuttons" "mappanel contentpanel ." "footer . .";
justify-content: center;
background-color: rgb(255, 255, 255);
color:rgba(0, 0, 0, 0.959);
}

header{
grid-area: header;
justify-content: center;
text-align: center;
background-color: rgb(255, 255, 255);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.description{
grid-area: description;
justify-content: center;
text-align: center;
width: 100%;
border-radius: 5px;
border: 5px solid #5E6472;
margin: .5rem;
}

.surveybuttons{
grid-area: surveybuttons;
justify-content: center;
text-align: center;
width: 100%;
margin: .5rem;
}

#map{
height:80vh;
grid-area: mappanel;
border-radius: 5px;
border: 2px solid #5E6472;
}

.box1{
grid-area: contentpanel;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
border: 5px solid #5E6472;
}

.box2{
grid-area: contentpanel;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
}

.box3{
grid-area: contentpanel;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
}

footer{
grid-area: footer;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}`

and Index

`

<!-- area for dynamic boxes -->
<div id="box1"> 
    <h3> Box 1: Event description, what happened </h3> 
</div>
<div class="row"> </div>

<div id="box2"> 
    <h3> Box 2: How did authorities respond </h3> 
</div>
<div class="row"> </div>

<div id="box3"> 
    <h3> Box 3: What resources would you have liked? </h3> 
</div>
<div class="row"> </div>

<footer>  
Copyright (2021)
</footer> 

<script src="js/init.js"></script>
</body>`

[albertkun]

Welcome back @alizezila ! Hmm, where did you want box2 to go in relation to box1? It might be helpful to drop by an office hour tonight!

https://calendly.com/albertkun/office-hours?month=2021-05

[alizezila]

Sorry I should have clarified, I just want them to be on top of each other

[albertkun]

@alizezila oh ok, in that case you should use a sub-grid, for the contentPanel area. You have some issues to address first:

1. you are using .box1 as CSS selectors, which is for a class. your boxes are in id, so you must use the # selector:

#box1{
grid-area: contentpanel;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
border: 5px solid #5E6472;
}

2. You can't share the same grid-template-area name, which is what .box1, .box2 etc.

You should put all the boxes into a content div and called that grid-template-area and place the boxes within the div like this:

<div id="container">
  <div id="box1"> 
      <h3> Box 1: Event description, what happened </h3> 
  </div>
  <div class="row"> </div>
  
  <div id="box2"> 
      <h3> Box 2: How did authorities respond </h3> 
  </div>
  <div class="row"> </div>
  
  <div id="box3"> 
      <h3> Box 3: What resources would you have liked? </h3> 
  </div>
</div>

your css for the container should look like this:

#container {
grid-area: contentpanel;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
border: 5px solid #5E6472;
display:grid;
grid-template-areas: "box1" "box2" "box3";
grid-template-rows: repeat(1, 200px);
}

See lab 8 for more details on sub-grids:
https://github.com/albertkun/21S-ASIAAM-191A/tree/main/Week_6/Lab#grid-ception-and-automatically-fitting-content

[alizezila]

hmmm this kind of worked! now they're all on top of each other, but in the right panel!

[albertkun]

@alizezila do you fix your css for the boxes?

it should look something like this:

#box1{
grid-area: box1;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
border: 5px solid #5E6472;
}

#box2{
grid-area: box2;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
}

#box3{
grid-area: box3;
overflow-y:scroll; /* adds a vertical scroll-bar to this div */
}

[alizezila]

AHAH! This is it! thank you so much Albert! Coding king!