I'm using CSS grid to position a dynamic number of elements into rows using grid-auto-rows.
However the last element is always placed against the bottom of the page irrespective of any padding applied to the grid container (padding is applied to the top, left & right but not to bottom).
Does anyone know where I'm going wrong?
https://codepen.io/wrgt1/pen/XWjEwXX
#container {
position: relative;
width: 100%;
}
.grid {
width: 100%;
display: grid;
grid-auto-flow: row;
grid-auto-rows: 25%;
grid-template-columns: 1fr 1fr;
padding: 50px;
}
.item {
width: 250px;
height: 250px;
background: red;
}
<div id="container">
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
acutally, (just like #Shristi mentioned) the problem happens because the grid-container does not reach the bottom of the items. this happens because of the grid-auto-rows which is set to 25%. After the fourth row this fills the 100%, everything else just moves out of the container. So you should change your code as follows:
.grid {
// box-sizing: border-box;
width: 100%;
display: grid;
grid-auto-flow: row;
grid-auto-rows: 250px; // change this!
grid-template-columns: 1fr 1fr;
grid-gap: 50px; // use this for the spacing in between
padding: 50px; // use this for the spacing top, bottom, left and right of the grid
}
the working example: here
This is because the height of your grid is less than it's contents. Add height to your grid and margin-bottom instead of padding. Hope this might help
.grid {
width: 100%;
display: grid;
grid-auto-flow: row;
grid-auto-rows: 25%;
grid-template-columns: 1fr 1fr;
padding: 50px;
height: 100%;
margin-bottom: 50px;
overflow-y: scroll;
}
Sometimes padding does not work in HTML so in that case, you can either make div or use the br tag.
<div class="spacing" style="padding-bottom: 100px;">
// or do br where you want it.
<br>
Related
I have the following code:
.my-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
.item {
background-color: #ddd;
height: 300px;
}
<div class="my-grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="new-item">hello!</div>
Which looks like this in my testing:
Notice how the hello is on the next row.
Is there any way to instead have it inserted after the grid above? Such that it is the last grid item? Such that it is in line with it, instead of being on the next row.
The obvious solution is to just place the new-item div as a child of my-grid, but I cannot do that in my case, because my-grid is an external component from the internet, so I cannot insert something inside of it.
These two elements also have a common parent as well. Which can be anything.
You can consider display: contents if they share the same container:
/* transfer all the styles to container
in the near future you can do .container:has(.my-grid) {}
*/
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
.item {
background-color: #ddd;
height: 300px;
}
/* we remove "my-grid" div*/
.my-grid {
display: contents;
}
<div class="container">
<div class="my-grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="new-item">hello!</div>
</div>
You can set absolute position on "new-item" and if you have a div container above "my-grid" do not forget to set "position: relative", on it. Then you can adjust the left and top of "new-item", relative to the main div container. Might course some problem in different resolutions of the screen, adress it with some media queries.
Considering this HMTL:
/* Desired styiling: */
.container {
display: grid;
grid-template-columns: 250px 250px 250px /* this is the part to automate */
grid-template-rows: 50px;
}
.child {
width: 100%;
height: 100%;
background: red;
}
<div class="container">
<div class="child">x</div>
<div class="child">y</div>
<div class="child">z</div>
</div>
And the fact that the number of .child element can change.
How can I make .container have display grid and a column of size 250px for every .child el?
I know this can be done in JS but I was looking for a css solution.
Update your code like below:
.container {
display: grid;
grid-auto-columns: 250px; /* size of each column */
grid-auto-flow: column; /* column flow */
grid-template-rows: 50px;
}
.child {
background: red;
}
<div class="container">
<div class="child">x</div>
<div class="child">y</div>
<div class="child">z</div>
</div>
I have a container grid to center the child inline-grid element. However, I'm unable to have auto-fill/auto-fit to take as many columns as there can fit. The grid items have a specified width/height.
It is possible to have the inline-grid take as many columns if specified directly, but that is not what I want.
If it's possible doing this with flex it would be okay, even though I prefer using grid.
I want the grid to be CSS ONLY. Do NOT post answers using JavaScript.
body, html {
margin: 0;
height: 100%;
}
.container {
display: grid;
background: red;
height: 100%;
}
.grid {
background: green;
height: 100%;
display: inline-grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 100px));
margin: auto;
}
.item {
background: blue;
}
<div class="container">
<div class="grid">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>
</div>
Automatic centering of grid items is not a simple matter because of the column tracks in the container. They restrict movement across the row. The problem is explained in full here:
Aligning grid items across the entire row/column (like flex items can)
Areas covered by Flexbox which are difficult or impossible to achieve with Grid
However, the layout may be possible with flex:
.grid {
display: flex;
background: green;
justify-content: center;
height: 100vh;
}
.item {
flex: 0 0 100px;
background: blue;
}
.item + .item {
margin-left: 5px;
}
body {
margin: 0;
}
<div class="grid">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>
I have a CSS grid, but I'm finding that the grid rows are not all fitting onto the page - instead, they're causing an overflow. How can I resize the grid rows so that they don't overflow the page? I thought the 1fr value was supposed to do this, but it doesn't seem to be working in my code.
I've had a look at Prevent content from expanding grid items and tried the suggested answers there (such as changing grid-template-rows: repeat(5, 1fr) to grid-template-rows: repeat(5, minmax(0, 1fr)); but to no avail.
I've tried adding height: 100% to the grid and it's container, but it is still overflowing.
JsFiddle https://jsfiddle.net/4g9b2qkL/
body,
html {
margin: 0;
height: 100%;
}
#container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100%;
}
#left {
grid-column: 1 / 2;
background: lightblue;
height: 100%;
}
#right {
grid-column: 2 / 3;
height: 100%;
}
#results {
display: grid;
grid-template-rows: repeat(5, 1fr);
height: 100%;
}
img {
max-height: 100%;
max-width: 100%;
}
<div id="container">
<div id="left">
<p>
Some stuff on the left....
</p>
</div>
<div id="right">
<h1>
Title
</h1>
<div id="results">
<div class="result">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
</div>
<div class="result">
Result 2
</div>
<div class="result">
Result 3
</div>
</div>
</div>
</div>
A few things to consider:
missing height reference
Using a percentage value to set the height of the img is problematic because there is no defined height on the container. Generally speaking, percentage heights should have a height reference on the parent for reliable rendering. Your declarations may or may not be ignored / misinterpreted.
See: Working with the CSS height property and percentage values
height: 100%
Setting the #results element to height: 100% is problematic, if you want to prevent a vertical overflow, because it doesn't factor in the height of the sibling (the h1).
height: 100% + height of h1 title > height of container (resulting in an overflow)
use a flexible height instead
Instead of using a percentage height, set a more flexible height, such as flex-grow. This tells the container to simply consume remaining space.
override the minimum height default
Grid and flex items are set by default to stop shrinking at the size of their content. Override that setting with min-height: 0.
See: Why don't flex items shrink past content size?
cross browser compatibility
Chrome can do the layout with less code (than posted below). It makes more assumptions about an author's intentions. Firefox, Edge and Safari assume less, so require more rules.
#container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100vh;
}
#left {
background: lightblue;
}
#right {
display: flex;
flex-direction: column;
height: 100vh;
}
#results {
flex-grow: 1;
min-height: 0;
display: grid;
grid-template-rows: repeat(5, 1fr);
}
.result {
min-height: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
body {
margin: 0;
}
<div id="container">
<div id="left">
<p>Some stuff on the left....</p>
</div>
<div id="right">
<h1>Title</h1>
<div id="results">
<div class="result">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
</div>
<div class="result">Result 2</div>
<div class="result">Result 3</div>
</div>
</div>
</div>
You need to consider min-height:0 in different places and make some adjustment like below:
body,
html {
margin: 0;
height: 100%;
}
#container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100%;
}
#left {
grid-column: 1 / 2;
background: lightblue;
/*height: 100%; removed */
}
#right {
grid-column: 2 / 3;
/*height: 100%; removed */
min-height:0; /* here */
/* added */
display:flex;
flex-direction:column;
/**/
}
#results {
display: grid;
grid-template-rows: repeat(5, 1fr);
/*height: 100%; removed */
flex-grow:1; /* added */
min-height:0 /* here */
}
.result {
min-height:0 /* here */
}
img {
max-height: 100%;
max-width: 100%;
}
<div id="container">
<div id="left">
<p>
Some stuff on the left....
</p>
</div>
<div id="right">
<h1>
Title
</h1>
<div id="results">
<div class="result">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
</div>
<div class="result">
Result 2
</div>
<div class="result">
Result 3
</div>
</div>
</div>
</div>
I'd want one child element to be 1/3 the size of its parent container and the other 2/3. The parent container is in a main container that uses grid-layout.
The parent container in question spans 2 columns of the main container it is contained in.
I've tried using margin, but it doesn't work: when I switch from a small screen to a large screen it moves to leave a gap.
<div class="main-container" style="display:grid; grid-template-columns: 1fr 2fr 1fr"> 1
<div></div>
<div class="parent-container" style="grid-column:span 2">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
</div>
css code I've tried:
.child-1{
margin-left:-20%;
}
Child-1 must be 1/3 of parent-container and child-2 2/3 of parent-container
You can make use of the nested grid container. The dotted borders signify the width that the child elements take from the parent container. The solid borders are for the main container's child elements. Rest is explained in comments.
.main-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 1/4th for Extra, 2/4th for Parent, 1/4th for Extra */
grid-auto-flow: column; /* Normal flow is row */
}
.parent-container {
display: grid; /* Nested Grid */
grid-template-columns: 1fr 2fr; /* 1/3rd for Child 1, 2/3rd for Child 2 of parent container*/
grid-auto-flow: column;
}
/* Extra styling for snippet, you just need the above logic */
.main-container {
font-size: 1.15em;
font-family: Sans-Serif;
}
.parent-container {
border: 2px solid black;
}
.parent-container>div {
background: #6660CE;
padding: 10px;
color: #fff;
text-align: center;
border: 2px dotted black;
}
.main-container>div {
background: #6660CE;
padding: 10px;
color: #fff;
text-align: center;
}
<div class="main-container">
<div class="extra">Extra</div>
<div class="parent-container">
<div class="child-1">Child 1 </div>
<div class="child-2">Child 2</div>
</div>
<div class="extra">Extra</div>
</div>
Simply give the parent element two columns with grid-template-columns, where the second column is twice the size of the first column (i.e. 1fr and 2fr).
This can be seen in the following:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
.child-1 {
background: red;
}
.child-2 {
background: blue;
}
.child {
height: 50px;
}
<div class="container">
<div class="child child-1"></div>
<div class="child child-2"></div>
</div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.child:nth-child(1) {
grid-area: 1 / 1;
background-color: #9341aa;
}
.child:nth-child(2) {
grid-area: 2 / 1 / span 1 / span 2;
background-color: #ab41aa;
}
.child:nth-child(3) {
grid-area: 3 / 1 / span 1 / span 3;
background-color: #cab332;
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
Using calc, something like this should do the trick:
HTML:
<div class="main-container">
<div></div>
<div class="parent-container">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
</div>
CSS:
.parent-container{
position: relative;
width: 100%;
height: 100%;
}
.parent-container .child-1,
.parent-container .child-2{
width: calc(100% / 3);
height: 100%;
float: left;
}