So I have a container as such:
.container{
max-width: 1300px;
margin: 0 auto;
padding: 20px 0px;
}
And inside the container, I have another child container/element which is a grid:
.child{
list-style-type: none;
padding: 0px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 15px;
}
Now for some reason, the child is causing the margin: 0 auto on the container to act weirdly: for example, at one time the margin on the left/right sides could be 280px, and other times it could be 297px, even if the screen width has not changed.
If I take out the following line from the .child,
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
...it works as expected, and the margin doesn't change.
I spent hours trying to figure this out with no luck, any ideas as to what could be happening here?
Related
I have a column of a defined size (let's say 50px), then an undetermined number of columns that should divide the available space among themselves, and finally another 50px column.
I know this could be achieved if I knew the total number of columns beforehand:
body > div {
grid-template-columns: 50px repeat(3, 1fr) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
I also know I can do a fixed sized column + n columns this way:
body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
But the specific case doesn't work as it could this way. Instead, I'm left with an empty column at the end:
body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr)) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
Is the thing I'm trying to do achievable with grid?
Remove the last column from the grid template. The column template would now look like this:
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));
Then add this:
div div:last-child {
grid-column: -1;
width: 50px;
}
That should work!
my code is not working to set grid columns. However I'm following the exact same format as I've seen across the internet. Does someone know the solution to this? I think it might be by including a "repeat" function to create 6 grid columns of the same width. (it might work in VSC but it does not work in Cengage)
My grid-template-rows is working perfectly fine.
body {
width: 90%;
min-width: 640px;
max-width: 1024px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
display: grid;
gap: 15px;
grid-template-columns: 1fr repeat;
grid-template-rows: 50px 30px 1fr 1fr 100px;
}
grid-template-columns: 1fr repeat;
should be
grid-template-columns: repeat(6, 1fr);
Hello i'm having this problem where if i don't have enough items there is more space between them than the row gap i provided? Why is that happening? (i have the same issue when i put flex-wrap:wrap......
This is what i have on the container
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 400px));
grid-template-rows: 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
height: calc(100% - 204px);
padding: 10px 10px 60px 10px;
On the items
height: 100px;
cursor:pointer;
width:100%;
border-radius: 0.75rem;
https://i.stack.imgur.com/f3g2h.png
grid-template-rows: 100px; means that the first row will be 100px and all the other will have an auto height. Either remove the property or use grid-auto-rows: 100px; to make sure all the rows will behave the same
https://codepen.io/jbautista1056/pen/rNOrZWN
Im trying to keep the div elements inside of the container and it works to a certain extent, but once I reach a certain number(over 50) it overflows its own container both vertically and horizontally. How can I make sure they stay inside past a certain number? I was thinking of repeat(autofit, 1fr) the content, but I need the repeat(sizeValue, 1fr) for the purpose of this project so I can't use that.
#Sketch {
height: 800px;
max-width: 1000px;
margin: 0 auto;
margin-top: 25px;
background-color: white;
border-radius: 70px;
border: 70px solid rgba(55, 220, 205, 0.44);
display: grid;
grid-template-rows: repeat(1, 1fr) ; /*auto-fit expands to fit inside the available columns/number specified*/
grid-template-columns: repeat(1, 1fr); /*2nd number is how wide u want the column to be*/
grid-row-gap: .3em;
grid-column-gap: .3em;
}
.babytiles {
height: auto;
width: auto;
border: 10px rgba(0, 0, 0, 0.041) solid;
background-color: red
}
In the #sketch style, set:
overflow:auto;
This should solve your problem.
I'm trying to use CSS grid to vertically and horizontally center some text in a header/title area, and have that area (and the whole layout) be somewhat flexible/responsive.
I've set up a simple example in this code pen, but if you don't want to head over there, the HTML and CSS in the example are this:
<div class='layout'>
<div class='titleArea'>
<svg viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'>
<text x='50%' y='60%' textAnchor='middle' dy='0.07em' class='titleText'>
Hello World
</text>
</svg>
</div>
<div class='mainArea'>
</div>
</div>
and this:
.layout {
height: 400px;
border: 1px solid red;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
grid-template-columns: 1fr;
grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
}
.titleArea {
border: 1px solid blue;
width: 100%;
-ms-grid-row: 1;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
svg {
height: 100%;
width: 100%;
/* uncomment line below to see text centering work in Edge */
/* max-height: 80px; */
justify-self: center;
align-self: center;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
}
.titleText {
font-size: 2.5em;
}
.mainArea {
border: 1px solid green;
}
The centering and flexing don't quite work in the pen, but it's pretty close, and certainly if viewed in Edge the problem becomes readily apparent.
If I open some dev tools and go and look at what's happening, the height: 100% is getting calculated not as the height of the parent container, but matches what's calculated for the width: 100%, which makes the text render huge and it completely breaks out of the parent container. If I set a max-height value to something within the range of what I expect the flexing to be, it reins everything in and the text ends up where it should, but then it's frozen at that size and doesn't subtly shrink/grow as the viewport changes.
Is there some workaround for this, or is this a legitimate bug in Edge?
The above setup works just fine in Chrome, Firefox, and even IE 11, the issue is only with Edge.
I have reproduced this problem on my machine, it seems that the issue is related to the SVG element's x and y attribute, it will set the starting point of the text baseline based on the whole page, instead of the SVG element. It can be possible that it is some kind of bug or it is Edge default behavior. I will try to submit the feedback regarding this issue.
As a workaround, I suggest you could try to change the CSS units, such as 'px'. And you could modify your code as below:
<style>
.layout {
height: 400px;
border: 1px solid red;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
grid-template-columns: 1fr;
grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
}
.titleArea {
border: 1px solid blue;
width: 100%;
-ms-grid-row: 1;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
text-align: center;
}
.titleArea svg {
height: 100%;
width: 100%;
/* uncomment line below to see text centering work in Edge */
/* max-height: 80px; */
justify-self: center;
align-self: center;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.titleText {
font-size: 20px;
}
.mainArea {
border: 1px solid green;
}
</style>
<div class='layout'>
<div class='titleArea'>
<svg width="100%" height="100" preserveAspectRatio='xMidYMid meet'>
<text x='50%' y='50' textAnchor='middle' dy='0.07em' class='titleText'>
Hello World
</text>
</svg>
</div>
<div class='mainArea'>
</div>
</div>
The result as below (using Microsoft Edge 44.18362.387.0 version):