Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm not understanding why the footer is not filling the entire bottom of the screen. Note: if I try to extend aside into that corner instead of footer it will also leave that are blank. Just refuses to fill that area with content. My project consists only of the css and html I have shown here. It behaves the same in chrome.
HTML:
<body>
<div class="container">
<header> header</header>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
CSS:
.container {
height: 100vh;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas: "header header" "main aside" "footer footer";
}
header {
grid-area: header;
background-color: teal;
}
main {
grid-area: main;
background-color: lightblue;
}
aside {
grid-area aside;
background-color: green;
}
footer {
grid-area footer;
background-color: gray;
}
Result:
firefox
firefox css grid prop
You forgot the colon in your css. It should be grid-area: footer; except you had grid-area footer;. It's fixed now in the snippet below for you. You did the same thing for aside as well. I fixed that in the snippet for you.
.container {
height: 100vh;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas: "header header" "main aside" "footer footer";
}
header {
grid-area: header;
background-color: teal;
}
main {
grid-area: main;
background-color: lightblue;
}
aside {
grid-area: aside;
background-color: green;
}
footer {
grid-area: footer;
background-color: gray;
}
<body>
<div class="container">
<header> header</header>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
Related
I want to make the site like the picture
(https://i.stack.imgur.com/rFj7L.jpg)
and because Im new I cant. Can you help me?
With CSS grid this is pretty easy to do!
https://www.w3schools.com/css/css_grid.asp
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'footer footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Use Bootstrap, it is an easy way to achieve your desired layout and many other layout options. It is free and very popular. It is used by professional developers, so you will also learn about industry level solutions. And great for beginners especially!
So I'm trying to set up a grid-formatted website page with pure HTML and CSS, as you will see in my code below.
I'm trying to alternate between two div tags going down the left hand column of Header & inner-placeholder tags.
You will see the HTML layout alignment with the grid-template-area clearly laid out, along with the number of rows as specified by grid-template-rows
So why do I get just a red box at the corner of the screen when it's fairly obvious what I want to have as per the illustration - except for a curved box followed by a straight box, followed by a curved box etc going down the left hand side?
I have tried to change the fr number to accommodate the number of rows on the left hand side.
Thank you.
Illustration
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"Title Title"
"Header Content"
"inner-placeholder Content"
"Header Content"
"inner-placeholder Content"
"Sidebar Content"
"Footer Footer";
grid-gap: 10px;
}
.Title{
grid-area: Title;
}
.Header{
grid-area: Header;
}
.Sidebar{
grid-area: Sidebar;
}
.Content{
grid-area: Content;
}
.Footer{
grid-area: Footer;
}
.inner-placeholder{
grid-area: inner-placeholder;
}
.grid div:nth-child(even){
background-color: red;
}
.grid div:nth-child(odd){
background-color: green;
}
<div class="grid">
<div class="Title">Title
</div>
<div class="Header">Header
</div>
<div class="inner-placeholder">
</div>
<div class="Header">Header
</div>
<div class="inner-placeholder">
</div>
<div class="Sidebar">Sidebar
</div>
<div class="Content">Content
</div>
<div class="Footer">Footer
</div>
</div>
It seems you misunderstood how grid areas work. If any grid area spans more than 1 row or column, it needs to form a square or a rectangle. Which means they also need to be in one continuous sequence as a 2x2 or 1x3 and so on, in your case you split the Header area and placeholder area between each other, which breaks the grid.
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
"Title Title"
"Header Content"
"inner-placeholder Content"
"Header2 Content"
"inner-placeholder2 Content"
"Sidebar Content"
"Footer Footer";
grid-gap: 10px;
}
.Title {
grid-area: Title;
}
.Header {
grid-area: Header;
}
.Header2 {
grid-area: Header2;
}
.Sidebar {
grid-area: Sidebar;
}
.Content {
grid-area: Content;
}
.Footer {
grid-area: Footer;
}
.inner-placeholder {
grid-area: inner-placeholder;
}
.inner-placeholder2 {
grid-area: inner-placeholder2;
}
.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color: green;
}
<div class="grid">
<div class="Title">Title</div>
<div class="Header">Header</div>
<div class="inner-placeholder"></div>
<div class="Header2">Header2</div>
<div class="inner-placeholder2"></div>
<div class="Sidebar">Sidebar</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</div>
I'm learning CSS grid and while trying to do my layout and use semantic html at the same time I run into some problems
https://codepen.io/oscarryz/pen/oNNBKyd
So basically I'm doing grid as 3x3 with empty space on the left and right and the content in the middle
.grid-container {
display: grid;
grid-template-columns: 1fr 40em 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
" . header . "
" . content . "
" . footer . ";
}
.header {
grid-area: header;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
.header, .content, .footer {
border: 1px solid red;
}
<div class="grid-container">
<header>
<div class="header">header</div>
</header>
<main>
<div class="content">content</div>
</main>
<footer>
<div class="footer">footer</div>
</footer>
</div>
As can be seen in the codepen above, this is not working. If I remove the semantic tags it works, obviously there must be a correct way of doing this
Grid templates are for direct descendants.
The semantic elements should be referenced by tagname, not class:
/* changed from .header, which is a _child_ of header */
header {
grid-area: header;
}
/* changed from .content, which is a _child_ of main */
main {
grid-area: content;
}
/* changed from .footer, which is a _child_ of footer */
footer {
grid-area: footer;
}
Corrected codepen here: https://codepen.io/c_bergh/pen/eYYvOmG
You've assigned grid areas to your non-semantic elements in your CSS. That's why the semantic elements are interfering with your grid — because they ended up not participating in your grid at all. If you had started out with the non-semantic structure, then migrated to semantic elements, this may have been a step you missed.
Assigning the grid areas to your semantic elements allows you to remove the non-semantic ones instead, completing this migration:
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container * {
border: 1px solid red;
position: relative;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 40em 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
" . header . "
" . content . "
" . footer . ";
}
header {
grid-area: header;
}
main {
grid-area: content;
}
footer {
grid-area: footer;
}
<div class="grid-container">
<header>header</header>
<main>content</main>
<footer>footer</footer>
</div>
I'm laying out HTML for a project, and as you can see on the joined picture, I have an issue about properly implementing <main> tag.
My layout has a content header above the sidebar and content, which prevents me from keeping the sidebar outside the main tag.
Would someone have a solution?
I tried having the sidebar code below the content in the HTML structure, and display it as shown in the picture with flexbox reverse row, but as soon as I wrap what I want inside a <main> semantic tag, everything breaks.
Use display: contents; to stop the main element having any effect on layout. Then layout its children as if they were siblings of main instead of children of it.
body {
background: black;
display: grid;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header header header" "content-header content-header content-header" "sidebar content content";
margin: 0;
padding: 0;
height: 100vh;
}
header {
background: #aaf;
grid-area: header;
}
main {
display: contents;
}
main header {
background: #faa;
grid-area: content-header;
}
main #content {
background: #afa;
grid-area: content;
}
aside {
background: #aff;
grid-area: sidebar;
}
<header>
header
</header>
<main>
<header>
content header
</header>
<div id="content">
content
</div>
</main>
<aside>
sidebar
</aside>
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 5 years ago.
I am working on switching my site to CSS Grid. I found an unexpected behavior.
I have a simple CSS-Grid layout header spanning two columns the next row has the side navigation with a fixed size, and the main content using the remaining space.
In the main element contains a pre tag with demo code. That pre is a rather long line, for some screen sizes it pushes the main area outside the browser view.
What I want is for the pre to have to scroll horizontally.
body {
margin: 40px;
}
pre {
overflow: auto;
background-color: #ffffff;
border: 1px solid #898989;
padding: 5px;
}
header {
background: #e1e1e1;
grid-area: header;
}
aside {
grid-area: aside;
background: #d7d7d7;
}
aside nav {
background: #e1e1e1;
}
aside nav ul {
list-style: none;
padding-top: 10px;
}
aside nav ul li {
margin-bottom: 10px;
}
main {
background: #c2c2c2;
grid-area: main;
}
.box {
border-radius: 5px;
padding: 20px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "header header" "aside main";
grid-template-columns: 200px 1fr;
grid-template-rows: 110px 1fr;
}
<div class="grid">
<header class="box">
<h1>Site Name and Navigation Bar</h1>
</header>
<aside class="box">
<h1>Sidebar</h1>
<p>This is the sidebar. Might have secondary navigation elements.</p>
<nav>
<ul>
<li>Link to nowhere</li>
<li>Link to nowhere</li>
</ul>
</nav>
</aside>
<main class="box">
<h1>Main Content</h1>
<p>The following <code>pre</code> element will be too large for our grid. It will not have a horizontal scrollbar if it has lines that exceed its width.</p>
<h2>Darn Pre</h2>
<pre><code><html>
<body>
<p>I like long sentences and can not lie. Look at it it's so big. That make your page to be far to wide. I want to get horizontal with the freaky line. My homeboys tried to warn me that pre can make you layout funky.
</p>
</body>
</html>
</code></pre>
<main>
</div>
codepen with demo of this problem
A Pre tag will try and fill all available space. The fix is to limit it in some way.
I fixed this by adding another 1fr column and having main span that.
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "header header header" "aside main main";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 110px 1fr;
}
Codepen example showing my fix