CSS Grid layout doesn't make the layout behave the way I want, no matter what I do


Jesky 26

Hi all I want to try this task and one of the requirements is that it uses grid layout in CSS so I just put together the beginning of the page to try and make the layout work the way I want and for me I can't get this page to work the way I need it to, and I'm at a loss, I can't figure out what I'm doing wrong or missing in this regard. I've looked at a lot of guides and sites on how to use grids, but I'm not sure what I'm missing. Thanks a lot for your help, here is my code. EDIT The layout I want is something like this.enter image description here

HTML

<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
<meta name="description" content="This is the assignment 3 web page showcasing what we have learned in COMP1223 the so far.">
<meta name="keywords" content="Assignment 3, HTML5, CSS, flexbox, grid, form, image mapping, position fixed, nav">
<meta name="author" content="Jessica">
<link href="grid.css" rel="stylesheet">
<link href="normalize.css" rel="stylesheet">
</head>

<body>


<div class="grid-container">
    <div class="grid-item">
        <aside class="hobbies">1</aside>
    </div>
    <div class="grid-item">
        <header class="intro">2</header>
    </div>
    <div class="grid-item">
        <section class="application">3</section>
    </div>
    <div class="grid-item">
        <section class="form_elements">4</section>
    </div>
    <div class="grid-item">
        <article class="tutorial">5</article>
    </div>
    <div class="grid-item">
        <footer class="image_mapping">6</footer>
    </div>
</div>

</body>

</html>

CSS

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: repeat(5 auto);
    background-color: #2196F3;
    padding: 10px;
    grid-template-areas: "hb int int" "hb app fe" "hb app fe" "tu tu tu" "im im im";
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

.hobbies {
    grid-area: hb;
}

.intro {
    grid-area: int;
}

.application {
    grid-area: app;
}

.form_elements {
    grid-area: fe;
}

.tutorial {
    grid-area: tu;
}

.image_mapping {
    grid-area: im;
}
Ponce

The problem is that you are assigning grid areas to "aside", "header" and stuff, and you should assign the same grid area to the div that contains them.

One tip, if you're going to use "aside" and stuff, you shouldn't put them in a div, because divs and aside do the same thing, they group the content.

I'll leave how I would do that task, so maybe it will help you in the future:

.grid-container {
  display: grid;
  grid-template-areas:
    "hb int int"
    "hb ma ma"
    "ar ar ar"
    "im im im";
  /*I give the rows and columns a size just for comfort, but you can use '1fr'*/
  grid-template-rows: repeat(5, 100px);
  grid-template-columns: repeat(3, 100px);
  background-color: #2196F3;
  padding: 10px;
}

.grid-item,  .grid-main-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px;
  font-size: 30px;
  text-align: center;
}

/*I use id's to be more specific in wich thing i want to assign wich grid-area*/

#hobbies {
  grid-area: hb;
}

#intro {
  grid-area: int;
}

#tutorial {
  grid-area: ar;
}

#image_mapping {
  grid-area: im;
}


/* main container to have that 2 section's inside another block*/
#main-container {
  grid-area: ma;
  display: grid;
  grid-template-areas:
    "app frm"
    "app frm";
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
    /*you can put padding: 0; so the main container is invisible*/
}

#application {
  grid-area: app;
}

#form_elements {
  grid-area: frm;
}
<div class="grid-container">

    <header class="grid-item" id="intro">2</header>

    <aside class="grid-item" id="hobbies">1</aside>

  <main class="grid-item" id="main-container">
    <section class="grid-main-item" id="application">3</section>

    <section class="grid-main-item" id="form_elements">4</section>

</main>
    <article class="grid-item" id="tutorial">5</article>
  

    <footer class="grid-item" id="image_mapping">6</footer>

</div>

Related


Twitter's bootstrap doesn't get the page layout I want

traitor andy I'm using twitter bootstrap as my layout, at the moment, this is how my page looks like: I wanted to move "fitness is our goal" below the big picture, but that didn't happen due to the way I handled the layout. Currently, I have the following layo

Twitter's bootstrap doesn't get the page layout I want

traitor andy I'm using twitter bootstrap as my layout, at the moment, this is how my page looks like: I wanted to move "fitness is our goal" below the big picture, but that didn't happen due to the way I handled the layout. Currently, I have the following layo

Matplotlib interactive mode doesn't work no matter what I do

username I am using python 3.7.7 and matplotlib 3.3.1 on Pycharm community 2020.1 I want to draw a graph and let the user decide if he likes the graph by providing some console input. This means I need matplotlib to work in interactive mode. I have tried many