CODEWITHSUNDEEP
htmlcsscss-grid
trailrunner89
trailrunner89

Reputation: 99

CSS grid layout issue - content overlapping template area

I have just started to learn about CSS grid instead of using bootstrap etc,

I have created rows and columns for header, nav, main, aside, footer.

But when I create a <div> inside of header it overlaps the boundary and I don't know why. The row height should increase with the content... That is why i used minmax(150px,auto)

The html is:

<nav>Nav</nav>
<header><div class="header-image"></div></header>
<main>Main</main>

The CSS is:

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  grid-template-areas: 
  "header"
  "nav"
  "main"
  "aside"
  "footer";
}

.header-image {
    background-size: cover;
    background-image: url('img/header-img.jpg');
    height: 200px;
}

Am I missing something obvious? Any help is appreciated!

Many thanks!

Edit-

The full WordPress HTML structure is:


<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial theme</title>
        
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/grid.css'; ?>">
        <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div class="container">
<header>
        <div class="header-image">
            <h1>Hello world!</h1>
        </div>
    </header>
    <main>

        <div class="order-div">
            <h2>Lorem ipsum dolor sit amet, consectetur</h2>
            <button>Order now!</button>
        </div>
    </main>
<footer>Footer</footer>
        </div>
    </body>
</html>

This is grid.css

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  grid-template-areas: 
  "header"
  "nav"
  "main"
  "footer";
}

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}


main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 100px minmax(150px, auto) 100px;
        grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer";
    }
}

@media (min-width: 992px) {
    .container {
        grid-template-areas:
            "header header header"
            "main main main"
            "footer footer footer";
    }
}

This is style.css

* {
    box-sizing: border-box;
}

body {
    font-size: 1.4em;
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.container > * {
    color: #fff;
    text-shadow: 0 2px 0 rgba(110,133,156,0.12);
    /*padding: 0.85em;*/
    border: solid 1px rgba(110,133,156,0.15);
}

header {
    background-color: #3f8abf;
}

.header-image {
    display: flex;
    justify-content: center;
    background-size: cover;
    background-image: url('img/header-img.jpg');
    height: 200px;
}

nav {
    background-color: #fbaea8;
}

main {
    background-color: #aad2ed;  
}

aside {
    background-color: #6ad78a; 
}

footer {
    background-color: #6e859c;
}

.order-div {
    min-height: 400px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.order-div button {
    width: 100px;
    height: 50px;
    border: 2px solid white;
}

I am hoping it is just a stupid mistake I made but the main problem seems to be the background image in the header - that I set to background-size:cover to be responsive!

Many thanks again!

Upvotes: 0

Views: 2216

Answers (2)

abdullahQureshee
abdullahQureshee

Reputation: 340

The problem is that you are setting the height for the grid yourself. This causes all the rows (grid items) to be the same height (as per grid specifications). Then you force one of the rows height to a custom value which is 200px. This disturbs the layout as these kind of new CSS modules are not so much intelligent to calculate everything. Remove the 100vh height of the grid and let it adjust itself according to the content.

Upvotes: 1

Life By Ben
Life By Ben

Reputation: 186

Your issue I believe is in your media query as its overriding the css of the one you've set above.

@media (min-width: 768px) {
    .container {
         grid-template-columns: 1fr 2fr 1fr;
         grid-template-rows: 100, minmax(150px, auto) 100;
         grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer";
    }
}

If you edit the "grid-template-rows" section to match your other container minmax(150,auto) like the code below seems to fix the content spilling over.

@media (min-width: 768px) {
    .container {
         grid-template-columns: 1fr 2fr 1fr;
         grid-template-rows:minmax(150px, auto);
         grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer";
    }
}

Upvotes: 0

Related Questions