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.
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'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 am using this CSS for my CSS grid declaration:
#slider_area {
grid-template: 1fr 1fr 1fr / 1fr 32%;
grid-column-gap: 8px;
grid-row-gap: 4px;
}
but it converts to:
#slider_area {
grid-template: 1fr 1fr 1fr 32%;
grid-column-gap: 8px;
grid-row-gap: 4px;
}
in my LESS, and the page view breaks.
You can check it here:
https://www.webtoolkitonline.com/less-to-css.html
Where can I report it, if it is a bug? And is there a workaround?
The problem is that LESS thinks this is a mathematical operation.
For example if you write:
#slider_area #A { grid-area: 1 / 2 / 1 / 2; }
Then it will output:
#slider_area #A { grid-area: 0.25; }
You can make use of escaping to workaround the problem:
Escaping allows you to use any arbitrary string as property or
variable value. Anything inside ~"anything" or ~'anything' is used as
is with no changes except interpolation.
#slider_area {
grid-template: ~"1fr 1fr 1fr / 1fr 32%";
grid-column-gap: 8px;
grid-row-gap: 4px;
}
Feels like a bug in LESS, you can use this workaround:
#slider_area {
#grid-template: "1fr 1fr 1fr / 1fr 32%";
grid-template: e(#grid-template);
grid-column-gap: 8px;
grid-row-gap: 4px;
}
the e function will just strip the parentheses from a variable
As mentioned in another answer, this is a bug with LESS, where the forward slash is interpreted as a division slash (see the report).
So instead of using the grid-template shorthand property:
grid-template: 1fr 1fr 1fr / 1fr 32%;
Just stick to the longhand properties:
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 32%;
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"
;
}