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.
Related
So I am trying to get all boxes the same size. They are all embedded with one image each though (as well as some text). Maybe it's the image and its size/ shape that's causing this to happen? I'm not sure.
.box {
box-shadow: 0 0.75px 0.75px 0 #000;
box-sizing: border-box;
width: 100%;
max-height: 800px;
}
img {
width: 80%;
height: auto;
border: 2px solid #000;
}
.description {
font-family: "Red Hat Mono";
font-size: 12px;
font-weight: 300;
letter-spacing: 0.15px;
text-align: center;
color: #000;
margin: 5px 10px 20px 10px;
text-align: left;
}
main {
display: grid;
grid-template-columns: 350px 350px;
grid-template-rows: repeat(2, 300px);
gap: 40px;
grid-auto-rows: 300px;
grid-auto-columns: 400px;
grid-auto-flow: row dense;
margin-top: 40px;
margin-bottom: 40px;
justify-items: center;
justify-content: center;
align-items: stretch;
align-content: center;
}
I thought the 'box-sizing' would help, but it didn't. The only thing that helped me thus far was changing the margins of some of the different elements involved and I don't feel like that's the answer..
The box-sizing: border-box; property in CSS defines the sizing of an element to include any padding and border widths in the total width and height of the element. By default, in CSS, the width and height of an element only includes the content area, and padding and border are added to the outside of the defined width and height. You can take a look here.
To set all your boxes to a fixed size you need to use the width and height properties. You can also use other units of measure, which work in a relative way and not in an absolute way.
.box {
box-shadow: 0 0.75px 0.75px 0 #000;
width: 500px;
height: 500px;
}
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!
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?
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
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)