I would like to make my header sticky when scrolling using CSS grid.
I have tried the solution proposed here: Sticky header on css grid
Meaning:
position: sticky;
top:0;
However it does not work...
.wrapper {
display: grid;
grid-template-areas: "header" "middle" "footer";
grid-template-rows: auto 1fr auto;
height: 100vh;
}
/* Header */
header {
order: 1;
grid-area: header;
display: grid;
grid-gap: 100px;
grid-template-areas: "logo nav";
grid-template-columns: auto 1fr;
grid-auto-flow: column;
position: sticky;
top: 0;
}
nav {
display: grid;
grid-area: nav;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* Middle */
.middle {
order: 2;
grid-area: middle;
display: grid;
grid-template-columns: 50px 1fr 50px;
}
.middle>* {
grid-column: 2 / -2;
}
/* Footer */
footer {
order: 3;
grid-area: footer;
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.footer-links {
display: grid;
grid-column: 2 /-2;
grid-template-columns: 1fr;
grid-auto-flow: column;
align-items: center;
}
<body>
<div class="wrapper">
<!-- Header -->
<header>
<img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px">
<nav>
Welcome
About
Art Work
Events
</nav>
</header>
<!-- Middle -->
<section class="middle">
</section>
<footer>
<div class="footer-links">
Instagram
<p>© 2019 Jääß</p>
</div>
</footer>
</div>
</body>
Everything displays as I want it to, except that the header scroll down instead of staying fix...
(For those who wonder, I put the order just to move it within a media query at a later stage of development)
Thank you for your answers!
To make the header fixed when scrolling, you could make it position: fixed. This requires you to set a fixed height for your header. This will make the header element flow on top of the content and ignore scrolling relative to the window.
.wrapper {
/* the header will not take any vertical place so shift wrapper down a bit*/
margin-top: 3rem;
display: grid;
/*I removed the header area as we don't need it anymore and would not work with fixed position anways*/
grid-template-areas: "middle" "footer";
grid-template-rows: 1fr auto;
/*I set the wrapper height to `200vw` so its easier to see the header not scrolling. Also take maring top into account*/
height: calc(200vh - 3rem);
}
/* Header */
header {
display: grid;
grid-gap: 100px;
grid-template-areas: "logo nav";
grid-template-columns: auto 1fr;
grid-auto-flow: column;
position: fixed;
top: 0;
height: 3rem;
width: 100%;
}
nav {
display: grid;
grid-area: nav;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* Middle */
.middle {
order: 2;
grid-area: middle;
display: grid;
grid-template-columns: 50px 1fr 50px;
}
.middle>* {
grid-column: 2 / -2;
}
/* Footer */
footer {
order: 3;
grid-area: footer;
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.footer-links {
display: grid;
grid-column: 2 /-2;
grid-template-columns: 1fr;
grid-auto-flow: column;
align-items: center;
}
<div class="wrapper">
<!-- Header -->
<header>
<img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px" />
<nav>
<a href="./index.html" title="Welcome" class="welcome active">Welcome</a
>
About
Art Work
Events
</nav>
</header>
<!-- Middle -->
<section class="middle"></section>
<footer>
<div class="footer-links">
<a href="https://www.instagram.com/jaeaess/" target="_blank">Instagram</a
>
<p>© 2019 Jääß</p>
</div>
</footer>
</div>
Ps.: You are kinda overusing the css grid at this moment. It is designed for 2 dimensional layouts. Your layout would be much(!) easier if you were using flexbox. Also making grid work in IE 11 is a pain.
Related
I made an inline svg with 3d.js and I want to use it in a grid layout.
Its using minmax(0,xfr) to make sure nothing gets bigger then the grid-item itself.
That works resonable but not with inline svg.
It seems to ignore the size at first, so I had to set the width and height.
But even that is ignored, when the screen becomes wide enough :(
Also it is not positioned in the middle but at the top so also the justify-self: center;
align-self: center; options of the grid-item is totaly ignored.
I am trying for hours now with all kind of settings (like preserve aspect ratio etc) but they all seems to not work. Also transform does not seem to work in all screen resolutions.
It seems I do something completely wrong, the size is determent by the svg element while the grid should set the size and the svg should adapt.
How can I make this svg behave like a normal scalable picture/div ?
You can see the code in codepen :
<div class="container">
<div class="Picture"></div>
<div class="Time">
<div class="StopWatch">
</div>
<div class="MinutesText"></div>
</div>
<div class="Level">
<div class="LevelPicture" style=" width:100%; height:100%">
<svg viewBox="0 0 100 100" id="circleLevel">
</svg>
</div>
<div class="LevelText"></div>
</div>
<div class="Arrow">
</div>
</div>
.container { display: grid;
grid-template-columns: minmax(0, 0.2fr) minmax(0, 1.5fr) minmax(0, 2.6fr) minmax(0, 0.6fr) minmax(0, 0.1fr);
grid-template-rows: minmax(0, 0.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.2fr);
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". . . . ."
". Picture Time . ."
". Picture Level Arrow ."
". . . . .";
}
.Picture {
justify-self: center;
align-self: center;
grid-area: Picture;
}
.Time { display: grid;
grid-template-columns: minmax(0,0.4fr) minmax(0,1.6fr);
grid-template-rows: minmax(0,1fr);
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"StopWatch MinutesText";
grid-area: Time;
}
.StopWatch {
justify-self: center;
align-self: center;
grid-area: StopWatch;
}
.MinutesText {
justify-self: start;
align-self: center;
grid-area: MinutesText;
}
.Level { display: grid;
grid-template-columns: minmax(0,0.4fr) minmax(0,1.6fr);
grid-template-rows: minmax(0,1fr);
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"LevelPicture LevelText";
grid-area: Level;
}
.LevelPicture {
justify-self: center;
align-self: center;
grid-area: LevelPicture;
}
.LevelText {
justify-self: start;
align-self: center;
grid-area: LevelText;
}
.Arrow {
justify-self: center;
align-self: center;
grid-area: Arrow;
}
html, body , .container {
height: 100%;
margin: 0;
}
https://codepen.io/mistert007/pen/mdjRwqr?editors=1111
When I tried putting 1fr in the first slot of minmax()and the browser dev tools tells me that it is not valid.
The moment I take away the 1fr, it works.
Code that did not work:
.grid {
grid-template-rows: minmax(1fr, auto); /* this did not work */
}
Is there any work arounds to this?
1fr cannot be your minimum because 1fr takes
1 fraction of the leftover space in the grid container
Here is the doc
You can do something like this
.grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}
.bloc {
display: flex;
justify-content: center;
align-items: center;
background-color: teal;
color: white;
}
<div class="grid">
<div class="bloc">1</div>
<div class="bloc">2</div>
<div class="bloc">3</div>
<div class="bloc">4</div>
<div class="bloc">5</div>
<div class="bloc">6</div>
<div class="bloc">7</div>
<div class="bloc">8</div>
<div class="bloc">9</div>
</div>
In the attached snippet, the "header" section of the grid has text that is aligned to the left. How can I go about adding additional text that is aligned to the far right section of the grid? Also, I am wondering how to go about centering the text vertically, as it currently is above the middle. I have tried adding another div and using justify-content and align-items, but nothing I have tried so far has worked. Would appreciate any help. Thank you.
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header,
footer,
article,
nav,
div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas: "header" "article" "ads" "nav" "footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
You can create left and right <div> elements inside your header, then give the header the following styles:
#pageHeader {
display: flex;
align-items: center; /*center children*/
justify-content: space-between; /*separate children*/
}
See the example snippet below:
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header,
footer,
article,
nav,
div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
display: flex;
align-items: center;
justify-content: space-between;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas: "header" "article" "ads" "nav" "footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
<!doctype html>
<title>CSS Grid Template 1</title>
<link rel="stylesheet" href="style.css">
<body>
<header id="pageHeader">
<div class="left">Header left</div>
<div class="right">Header right</div>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>
Make the header element a flex container and then use
justify-content: space-between;
to align "Header" text on the left side and the additional text on the right side.
To vertically center the contents of the header, use
align-items: center;
You need to change the HTML structure of of header element as shown below:
<header id="pageHeader">
<span>Header</span>
<span>I will be on right side</span>
</header>
and the CSS to get the desired layout:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
Output:
I try to use background image within css grid, but I cannot see the images
.firstPage {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-template-areas: "homePageImage1 homePageImage2"
}
.homePageImage1 {
grid-area: homePageImage1;
background-image: url('https://postimg.cc/F12QYFjW');
width: 700px;
height: 962px;
}
.homePageImage2 {
grid-area: homePageImage2;
background-image: url("https://postimg.cc/LJQDs5Ph");
width: 666px;
height: 962px;
}
<div class="firstPage" style="width: 1366px;">
<div class="homePageImage1">
</div>
<div class="homePageImage2">
</div>
</div>
here is the fiddle: https://jsfiddle.net/flamant/09csye6f/40/
You should use the url of the image not the site, for example https://i.postimg.cc/gk0cBnrW/home-Page-Image1.png instead of https://postimg.cc/F12QYFjW
EDIT:
After checking your files, the problem was that the url was not finding the relative local paths of the images since you specifically specified a base one in the top of your head. So, the solution is to simply remove <base href="/">. You can read more about this here.
You have to add the image address like this:
.firstPage {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-template-areas: "homePageImage1 homePageImage2"
}
.homePageImage1 {
grid-area: homePageImage1;
background-image: url('https://i.postimg.cc/gk0cBnrW/home-Page-Image1.png');
width: 700px;
height: 962px;
}
.homePageImage2 {
grid-area: homePageImage2;
background-image: url("https://i.postimg.cc/d0wx4TtR/home-Page-Image2.png");
width: 666px;
height: 962px;
}
<div class="firstPage" style="width: 1366px;">
<div class="homePageImage1">
</div>
<div class="homePageImage2">
</div>
</div>
I have the following grid with 3 items:
<div class="grid">
<p> </p>
<p> </p>
<button> </button>
</div>
.grid {
display: grid;
justify-content: flex-start;
align-items: flex-end;
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
grid-gap: 2rem;
}
I want the paragraphs to be at least 200px as from css minmax and the button to be at least 100px and wrap as a decrease the browser window width.
but this doesnt happen.
The elements stay in one row.
Thank you
Close enough to what you wanted (without media queries and convoluted rules not worth the trouble):
HTML:
<div class="container">
<p>Lorem ipsum</p>
<p>Delor sit</p>
<button>Amet</button>
</div>
CSS:
// See the container's items:
.container > * { background: lightblue; }
A) Use grid; don't know if possible to set different minmax() while preserving repeat(auto-fit, ..) behavior:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 2rem;
}
B) Use flexbox; the margins hack mimicks grid's gutters until CSS implements flexbox gutters natively:
.container {
display: flex;
flex-wrap: wrap;
margin-right: -2rem;
}
.container > * { margin-right: 2rem; }
p { flex: 1 1 200px; }
button { flex: 1 1 100px; }