I have some problems to add a margin to my grid layout.
I can't insert margins to the body or my .container that is taking the whole viewport.
When the page gets scrollable... the vertical scrollbar forces also a horizontal scrollbar.
.container {
height:100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"footer"
;
}
Use "box-sizing: border-box"
.container {
box-sizing: border-box;
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"footer"
;
}
Related
I want to make the column width of a 3-column grid to be the minimum of 1fr or 100px.
Here's what I tried, but dev tools say it's not a valid value.
.my-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, min(100px, 1fr)));
}
Why isn't this correct?
Use percentage and not 1fr
.my-grid {
display: grid;
/* (100% - (N-1)*Gap)/N */
grid-template-columns: repeat(3, min(100px, calc(100% - 2*5px)/3));
justify-content: center;
gap: 5px;
}
.my-grid > div {
height: 50px;
background: red;
}
<div class="my-grid">
<div></div>
<div></div>
<div></div>
</div>
hey in the minmax you don't need to pass the min(), in minmax the first parameter is the min value and second is max value, you can set it accordingly.
like minmax(1fr,33%)
I am trying to make a responsive grid section using media queries and CSS grid. The grid looks fine on full width but as soon as 999px and 750px media queries kick in I begin to have a strange problem where I have extra CSS grid gutters on the right and on the bottom of the grid.
.categories-grid > .website-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"nails nails offers offers"
"image image kids-img kids"
"image image hair hair-img";
gap: 40px 35px;
height: 1060px;
}
#media only screen and (max-width: 999px) .categories-grid > .website-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"nails nails"
"kids-img kids"
"hair hair-img"
"offers offers";
gap: 30px 25px;
height: auto;
}
#media only screen and (max-width: 750px) .categories-grid > .website-grid {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
"nails"
"offers"
"kids-img"
"kids"
"hair-img"
"hair";
}
max750px media query
max999px media query
full width
I found the problem. The "image" div was causing an extra row to be created. after making a css rule to hide that div in the media queries the extra rows and columns went away.
I have a problem with my grid :
I am using a grid like this :
.grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
I have an image in the cell 3-3 :
.dice-pic {
background-image: url(assets/dice_6.png);
grid-column-start: 3;
grid-row-start: 3;
background-repeat: no-repeat;
}
I am trying to make this image in the center of the cell but when i add :
justify-self: center;
align-self: center;
my image disappear. Any idea how I could fix it ? thanks !
I suggest you use z-index, which should help you display your image on the top-level component.
I'm trying to get the following angular-material layout working. I have a mat-toolbar at the top, and mat-sidenav on the bottom. No matter what I try, I can't get the mat-sidenav-container to take up the whole page height. This is my attempt using grid layout. It looks like it should work, but it doesn't. It seems like the mat-sidenav automatically shrinks to the height of element inside mat-sidenav-content.
Here's my html:
<div class="main-div">
<app-header class="app-header"></app-header>
<app-sidenav class="app-sidenav"></app-sidenav>
</div>
Here's my css:
.main-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.app-header {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.app-sidenav {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
Try adding this
.main-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
height: 100vh;
}
.mat-sidenav-container {
height: 100%;
}
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.