CSS Grid Help with grid template areas

CSS Grid Help with grid template areas
0.0 0

#1

Hello,

I have been trying to use CSS grid to make a layout for a website. It seems that I can never get the grid to work like I want to. Currently, the footer element is above the p and div elements that should be above it. I am using grid-template-areas. I’m wondering if this could all be avoided by just specifying the specific lines for each section.

Here is my html markup with css in the head. Thank you!


<html>


<head>
<title>
Quercus Web Development 
</title>


<style>


body {
	background: url("img/background.jpg");
	font-family: arial, helvetica, sans-serif;
	background-position:fixed;
	background-size:cover;
	margin: 0;

}

.wrapper {
	display:grid;
	width:100%;
	grid-gap:10px;
	grid-template-columns: repeat (8, 1fr);
	grid-template-rows: repeat (8, 1fr);
	grid-template-areas:
	" head head head head head head head head "
	" head head head head head head head head "
	" menu menu menu menu menu menu menu menu"
	" content content content content aside aside aside aside"
	" content content content content aside aside aside aside"
	" content content content content aside aside aside aside"
	" content content content content aside aside aside aside"
	" foot foot foot foot foot foot foot foot"; 
}

header { 
	background-color:white;
	grid-area: head;

}

nav {
	background-color: white;
	grid-area: menu;

}

.menu {
	list-style-type:none;
}

p {
	background-color: white;
	grid-area: content;
}

.aside {
	background-color:white;
	grid-area: aside;
}

footer {
	background-color:white;
	grid-area: foot;
}

</style>
</html>

<body>

<div class="wrapper">

<header>
Quercus Web Development
</header>

<nav>

	<ul class="menu">
		<li>Home</li>
		<li>About</li>
		<li>Porfolio</li>
		<li>Contact</li>

	</ul>
</nav>



<p>

<h1> Services </h1>
	<ul>
		<li>Responsive Web Design</li>
		<li>Progressive Web Apps</li>
		<li>Consultation for Technical Software and Web Development Projects</li>
	</ul>

</p>

<div class="aside">
 
	Photo may go here

</div>




	
<footer>Copyright 2018 Quercus Web Development </footer>



</div>
</body>

</html>


#2

in my experience, specifying lines is the most precise way and gives results that are expected.


#3

That makes sense and I may go that route from now on. However I would like to know what I am doing wrong. I have watched tutorials on css grid and it always seems very simple to use grid-template-areas.


#4

Also please forgive silly mistakes in my code :slight_smile: I didn’t close the <head> tag.


#5

if you give a pen link, i can take a look there.


#6

Here is a codepen, also my p element isn’t showing a white background that I set in the css while all other elements do.


#7

I see a p tag but no text after the tag and no closing tag (around line 23). Not sure why you have that there…


#8

The closing tag is right after the unordered list. I originally wanted to put text in it but decided to just put the list in it for now. Is this not appropriate and would it affect the layout at all?

Thanks for your help!


#9

yes, I think the p tag use is not supposed to replace a div or a span tag. (it sounds like you should use one of these instead). Anyway, I forked your code and fixed it a bit so please take a look here:

and then copy the bits you want out and let me know when you’re done so I can delete the pen.


#10

Thank you very much. Can you explain what you changed? I see that you used a div tag instead of the p. Is that all?


#11

yes I put the old p and ul stuff inside a div then I closed the p tag around the word ‘something’ so you can see where it is now.
Also I changed the css for the p by making it select the div instead of the p.
I think that’s it.
you can diff the css file using any file diff tool to see compare them further.


#12

Hi there, just reminding you to copy the code and let me know when you’re done so I can delete that pen. thanks.


#13

I fixed it. Thank you!