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!
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.
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";
}
}
Related
The grid-template-areas is being used here. However, the main area is not taking up the rest of the area, and I dont need aside for my project.
How can I make the main area take up the rest of the area?
.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
height: 100vh;
}
header {
grid-area: header;
border: 1px solid #61dafb;
}
nav {
grid-area: nav;
margin-left: 0.5rem;
border: 1px solid red;
}
main {
grid-area: content;
border: 1px solid blue;
}
footer {
grid-area: footer;
border: 1px solid black;
}
#media (max-width: 768px) {
.container {
grid-template-areas: "header" "nav" "content" "side" "footer";
grid-template-columns: 1fr;
grid-template-rows: auto/* Header */
minmax(75px, auto)/* Nav */
1fr/* Content */
minmax(75px, auto)/* Sidebar */
auto;
/* Footer */
}
nav,
aside {
margin: 0;
}
}
header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="container">
<header>
<div>Header</div>
</header>
<nav>
<div>nav</div>
</nav>
<main>
</main>
<footer>
<div>Footer</div>
</footer>
</div>
Attaching JSfiddle https://jsfiddle.net/fgmwe281/2/
I am trying to use grid-template-areas for my boilerplate code for layout. However, unable to get the main content to take up the space on right(the area for aside).
I would skip grid-template-areas completely. It is nice for beginners as it visually displays the areas but overall it increases the size of necessary code. On top of that, it is easier to just skip it and letting the header and the footer span the entire with by using grid-column: 1 / -1;.
If you change the grid-template-columns to min-content auto min-content then the sidebar and the navigation will only consume as much space as needed. In this case, I sued the width on the containing div. If it exist then it will consume 200px width, if it doesn't, then it will consume no space:
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: min-content auto min-content;
grid-gap: 10px;
min-height: 100vh;
}
header,
footer {
grid-column: 1 / -1;
}
nav > div,
aside > div {
width: 200px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
}
#media only screen
and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
}
}
#media only screen
and (min-width: 769px) {
.container {
grid-template-rows: auto 1fr auto;
}
}
header {
border: 1px solid #61dafb;
}
nav {
border: 1px solid red;
}
main {
border: 1px solid blue;
}
footer {
border: 1px solid black;
}
<div class="container">
<header>
<div>Header</div>
</header>
<nav>
<div>nav</div>
</nav>
<main>
<div>main</div>
</main>
<aside></aside>
<footer>
<div>Footer</div>
</footer>
</div>
The objective is to insert side margins for wider screens, while keeping the header span the entire width.
Normally we'd write
.inner {
margin: 0 5%;
}
to get such margins, but it turns out that HTML grids are so flexible that they make side margins possible through dead grid DIVs.
But somehow using dead DIVs does not seem quite right. Is there a way to obtain side margins within a grid. I see how this can be done with a blend of flex and grid. Here I'm wondering if it can be done with grids alone.
body {
height: 100vh; margin: 0; display: flex;
}
.outer{
margin: 5px; border: 5px; padding: 5px;
display: flex;
flex-grow: 1;
}
.inner {
flex-grow: 1;
margin: 5px; border: 5px; padding: 5px; grid-gap: 5px;
display: grid;
grid-template-rows: 100px 5fr 100px;
grid-template-columns: 1fr;
grid-template-areas: "header" "content" "side";
}
#media screen and (min-width: 600px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5fr 100px;
grid-template-areas:
"header header"
"content side";
}
}
#media screen and (min-width: 800px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 1fr 5fr 100px 1fr;
grid-template-areas:
"header header header header"
"leftmargin content side rightmargin";
}
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #444;
background-color: #eee;
font-size: 150%;
position: relative;
}
.header { grid-area: header; }
.content { grid-area: content; }
.side { grid-area: side; }
.leftmargin { grid-area: leftmargin; }
.rightmargin { grid-area: rightmargin; }
<div class="outer">
<div class="inner">
<div class="box header">Header</div>
<div class="box content">Content</div>
<div class="box side">Side</div>
</div>
</div>
Use dots (.) to declare empty grid areas:
grid-template-areas:
"header header header header"
". content side .";
Example:
body {
height: 100vh;
margin: 10px;
}
.inner {
display: grid;
grid-template-rows: 100px 5fr 100px;
grid-template-columns: 1fr;
grid-template-areas: "header" "content" "side";
grid-gap: 5px;
}
#media screen and (min-width: 600px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5fr 100px;
grid-template-areas:
"header header"
"content side";
}
}
#media screen and (min-width: 800px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5% 5fr 100px 5%;
grid-template-areas:
"header header header header"
". content side .";
}
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #444;
background-color: #eee;
font-size: 150%;
position: relative;
}
.header { grid-area: header; }
.content { grid-area: content; }
.side { grid-area: side; }
<div class="inner">
<div class="box header">Header</div>
<div class="box content">Content</div>
<div class="box side">Side</div>
</div>
I'm working on a navbar for a website, like your average navbar, It has a logo (float: left), links to other pages, and account setting at the end (float: right), all side by side. When the window gets resized, I want to be able to still have all elements of the navbar present without having to scroll horizontally. I want to do this by placing all the links to the pages below the logo (and still have account setting at the top right).
At Full-screen the navbar work perfectly (simple enough). When the window is resized everything gets messed up (last div ends up out of window).
The two top images are illustrations of what im working towards, and the third one down is my current issue.
I have some experience in css, but understanding how to fix this (or look up how to fix this) is beyond my abilities. I would really appreciate some help :)
Attached code snippet, is a base that uses "CSS grid" and media queries. There are some duplicates in the CSS that could with more time spent, be improved, thus minimize the code. It gives you an idea about how these layouts are built.
#media only screen and (max-width: 600px) {
.wrapper {
display: grid;
grid-template-columns:
1fr
;
grid-template-rows:
100px
100px
100px
;
grid-template-areas:
"header-1"
"header-2"
"content"
;
}
.header-1 {
grid-area: header-1;
background-color: grey;
}
.header-2 {
grid-area: header-2;
background-color: grey;
}
.content {
grid-area: content;
background-color: lightgrey;
}
.header-1 {
display: grid;
grid-template-columns:
1fr
1fr
1fr
;
grid-template-rows:
100px
;
grid-template-areas:
"box-1 box-2 box-3"
;
}
.box-1 {
grid-area: box-1;
background-color: magenta;
margin: 10px;
}
.box-2 {
grid-area: box-2;
background-color: cyan;
margin: 10px;
}
.box-3 {
grid-area: box-3;
background-color: green;
margin: 10px;
}
}
#media only screen and (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns:
1fr
;
grid-template-rows:
100px
100px
100px
;
grid-template-areas:
"header-1"
"header-2"
"content"
;
}
.header-1 {
grid-area: header-1;
background-color: grey;
}
.header-2 {
grid-area: header-2;
background-color: grey;
}
.content {
grid-area: content;
background-color: lightgrey;
}
.header-1 {
display: grid;
grid-template-columns:
1fr
1fr
1fr
;
grid-template-rows:
100px
;
grid-template-areas:
"box-1 . box-3"
;
}
.header-2 {
display: grid;
grid-template-columns:
1fr
1fr
1fr
;
grid-template-rows:
100px
;
grid-template-areas:
"box-2 box-2 box-2"
;
}
.box-1 {
grid-area: box-1;
background-color: magenta;
margin: 10px;
}
.box-2 {
grid-area: box-2;
background-color: cyan;
}
.box-3 {
grid-area: box-3;
background-color: green;
margin: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="header-1">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
<div class="header-2">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
<div class="content"></div>
</div>
</body>
</html>
I want the area in red to always fit the content so that the area below (the commenting section) is always right after and not down below.
In chrome, it works, but not in Firefox (see picture).
I thought that by adding grid-template-rows: max-content; it will make it happen, but apparently not.
So, how to make the red area always fit the content so the commenting area is right after.
https://jsfiddle.net/mjb7cehy/
HTML and CSS
.gridAB {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "body" "aside" "comment";
grid-gap: 40px;
}
#media screen and (min-width: 768px) {
.gridAB {
grid-template-columns: 2fr 1fr;
grid-template-rows: max-content;
grid-template-areas: "body aside" "comment aside";
}
}
.gridAB .aside {
grid-area: aside;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
align-content: flex-start;
}
.gridAB .body {
grid-area: body;
background-color: red;
}
.gridAB .album {
background-color: pink;
}
.gridAB .credit {
background-color: green;
}
.gridAB .version {
background-color: yellow;
}
.gridAB .comment {
grid-area: comment;
background-color: #eee;
}
<div class="gridAB">
<div class="body">body goes here</div>
<div class="aside">
<div class="album">album</div>
<div class="credit">credits</div>
<div class="version">version</div>
</div>
<div class="comment">comments go here</div>
</div>
Try
grid-template-rows: 0fr 1fr;
will work: Please find updated example link: jsfiddle
I want to bring out the elements from a nested grid at a smaller screen width. In the example, the elements are all set to one another when the screen reaches a certain pixel width.
I would like the elements to be displayed one after the other, and to return to the original area with a larger pixel width. Probably this is a fairly simple solution but I could not find any tip yet. Maybe someone has an idea?
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}
#media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas: "header header" "sidebar content" "sidebar2 sidebar2" "footer footer";
}
}
#media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas: "header header header" "sidebar content sidebar2" "footer footer footer";
max-width: 600px;
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}
.sidebar2 {
background-color: #ccc;
color: #444;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content"> Content
<div class="box nested_sidebar">Sidebar 2</div>
<div class="box nested_sidebar">Sidebar 2</div>
</div>
<div class="box footer">Footer</div>
</div>
The grid container is the parent element.
The grid items are the child elements (and only the child elements; descendants beyond the children are not grid items).
The child elements of grid items are, well, whatever they may be, they are not children of the main container, so they are not grid items and cannot accept grid properties like their grid item parents.
Therefore, unless you want to use absolute positioning, there is no clean CSS method for moving nested elements into the main grid container.
However, how about removing the nesting? Grid is very good at allowing elements to overlap.
jsFiddle demo
.wrapper {
display: grid;
grid-template-rows: 1fr;
grid-gap: 1em;
grid-template-areas: "header"
"sidebar"
"content"
"..."
"..."
"sidebar2"
"footer"
}
#media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% 1fr;
grid-template-rows: 100px repeat(3, 50px) 100px;
grid-template-areas: "header header"
"sidebar content"
"sidebar content"
"sidebar content"
"sidebar2 sidebar2"
"footer footer";
}
.nested_sidebar1 {
grid-row: 3 / 4;
grid-column: 2 / 3;
}
.nested_sidebar2 {
grid-row: 4 / 5;
grid-column: 2 / 3;
}
}
#media only screen and (min-width: 800px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-rows: 100px repeat(3, 50px) 100px;
grid-template-areas: "header header header"
"sidebar content sidebar2"
"sidebar content sidebar2"
"sidebar content sidebar2"
"footer footer footer";
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header {
grid-area: header;
background-color: #999;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
background-color: #ccc;
color: #444;
}
.content {
grid-area: content;
}
.nested_sidebar1 {
background-color: orange;
}
.nested_sidebar2 {
background-color: tomato;
}
.footer {
grid-area: footer;
background-color: #999;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content">Content</div>
<div class="box nested_sidebar1">Sidebar 2a</div>
<div class="box nested_sidebar2">Sidebar 2b</div>
<div class="box footer">Footer</div>
</div>
I would play around with using fr instead of % as well as including grid-template-rows to get your desired result.
If you post a wire-frame of what you're hoping to achieve I'd be happy to give it a shot.