CODEWITHSUNDEEP
htmlcssgridgrid-layout
Jskye26
Jskye26

Reputation: 75

CSS Grid layout can't get layout to behave the way I want no matter what I do

Hey guys so im trying to do this assignment and one of the requirements is that it uses a grid layout in CSS so I have put together just the beginning of the page trying to get the layout to work the way I want it to and for the life of me I can't get this page to behave the way I need and it's driving me up the wall that I can't figure out what I am doing wrong or missing on this. I have looked at so many guides and sites on how to use grid and I am just not sure what I am missing. Any help is really appreciated here's my code. Edit The layout that I am aiming towards 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;
}

Upvotes: 1

Views: 2050

Answers (2)

anthony_718
anthony_718

Reputation: 474

Here is another implementation, maybe easier to understand

<!DOCTYPE html>
<html lang="en">
<head>
    <style>

        * {
            padding: 40px;
        }
        body {
            background-color: rgb(61, 61, 61);
        }
        .container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }

        .container > div {
            border-style: solid;
        }

        .aside {
            grid-row: 1 / 3;
        }

        .header {
            grid-column: 2 / 4
        }

        .article, .section {
            grid-column: 1 / 4;
        }
    </style>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="aside">aside</div>
        <div class="header">header</div>
        <div>section</div>
        <div>section</div>
        <div class="article">article </div>
        <div class="section">section</div>
    </div>
</body>
</html>

Check out the demo: https://codepen.io/anthony_718/pen/dyppJwd

Resource for understanding CSS Grid: https://scotch.io/tutorials/getting-started-with-css-grid-layout

Upvotes: 1

galobponce
galobponce

Reputation: 38

the problem is that you are assigning the grid-areas to the 'aside', 'header' and stuff, while you should be assigning the same grid-areas to the div's that are containing them.

One tip, if you are going to use 'aside' and stuff, you should not put them into div's because div and aside do the same thing, they group content.

I will leave how i would do that assignament so maybe it will helps 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>

Upvotes: 2

Related Questions