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
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);
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?
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 using the new CSS grid layout, basically I'm displaying a series of images, which is fine with six columns, I've gotten that part down, but the content has a variable number, and often times there is not enough content to fill every column, so in the event that there's only say two items in the row, I'd like them to center in the middle two columns. This being a relatively new API though I haven't seen anything like this that I've managed to get working properly. Here is some sample CSS, please excuse my general ignorance if something looks horribly wrong.
#result-images{
display: grid;
grid-template-columns: 260px 260px 260px 260px 260px 260px;
grid-gap: 11px;
grid-column-gap:55px;
background-color: #959595;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;
}
#result-images img{
width:100%;
height: 100%;
background-color: #363636;
display:block;
margin: 0 auto;
}
Flexbox is actually easier to use to achieve this output. Example below.
#result-images{
display:flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
align-items:center;
border: 2px solid black;
max-width:360px;
}
#result-images img{
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
flex: 0 1 auto
align-self:center;
}
<section id="result-images">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
</section>
List item
Center an image in the area
#result-images {
border: 2px solid #fffff;
border-radius: 5px;
background-color: #959595;
}
#result-images {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a a a ."
". a a a a .";
}
img {
grid-area: a;
align-self: center;
justify-self: center;
width: 100px;
height: 100px;
}
<div id="result-images">
<img src="https://c1.staticflickr.com/2/1018/805106121_ab84d1a216_b.jpg" />
</div>
use auto-fit with repeat()
in your case grid-template-columns: repeat(auto-fit, 260px)