I have a note app, and this is my styling for note grid:
.notes-grid{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 0.2fr));
gap: 10px;
}
grid template columns was
repeat(auto-fit,minmax(250px, 1fr)); before, but i want to make the gap responsive, not the size of notes.
I set an initial value for gap, and it is 10px. When grid starts to wrap, i want to change gap responsibly to fill blank area.
I want to spread notes across the width to right of 'note3'
You need to play with alignment:
.notes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 0.2fr));
gap: 10px;
justify-content: space-between; /* added this */
}
.notes-grid > div {
border-radius: 10px;
height: 150px;
background: red;
}
<div class="notes-grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
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%)
In the example below, the .grid-container div will stretch over the width of the body (that is, the viewport width), but its height will be the same as the .grid-item height.
Any explanations to why that is the case? I'm having trouble wrapping my head around it.
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
background-color: red;
}
.grid-item {
background-color: blue;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
</div>
as you can see what you are doing here is not a grid. It would be better if you use CSS flexbox instead of grid for one column grid.
just replace this code with grid-container class
display: flex;
flex-direction: column;
align-items: center;
justify-items: space-around;
and also note that every element of type div in HTML takes the whole width of the line and it's height is defined by the content inside it. It doesn't stretch all the way down to the bottom until you set a fixed height to it. you can set position: relative; to grid container parent and set its position to absolute. then add width: 100%; and height: 100%; to it.
add more information about your code for more detailed help.
After reading MDN's display page, I think I found the answer:
grid The element behaves like a block element and lays out its content according to the grid model.
The grid container by default behaves like a block element, which is why it will span the entire width of the parent when its size is not set explicitly. You can prevent this behavior and make it inline with display: inline grid or display: inline-grid (legacy).
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: inline grid;
grid-template: 1fr / 1fr;
place-items: center;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
</div>
There are lots of similar questions, I have reviewed all of them, but none solved my problem.
Premises:
I have a flexbox layout with flex column and the bottom flex-item filling the remainder of the page height. The flex-item gets stretched to the remainder of the page by flex 1.
Goal:
I need my grid (with its children) inside this flex-item to expand to the height of the flex-item.
Problem:
The html wrapper only has a min-height 100vh set. This makes the grid stretch to the flex-item, but not its children!
The only solution I can find is to also set height 100vh on the html wrapper, but I do not want to do this. Is there any way to solve my problem without setting height?
See the codepen here:
https://codepen.io/mesqueeb/pen/aGeKjm
See the animated GIF here to show you what I mean:
You can try this.
remove the flex-direction: column; in the .remaining and it will expand the height.
main{
min-height: calc(100vh - 51px);
display: flex;
flex-direction: column;
}
div{
border: solid goldenrod thick;
padding: 2px;
margin: 2px;
}
.full-page{
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
}
.top-row{
height: 100px;
}
.remaining{
flex: 1;
display: flex;
}
.grid{
border: solid teal thick;
flex: 1;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.key{
border: thin green solid
}
.small{
font-size: .8em
}
<main>
<div class="full-page">
<div class="top-row">
grid below will take full height only if body height is set...
</div>
<div class="remaining">
<div class="grid">
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">C</div>
<div class="key">0</div>
<div class="key">➕</div>
</div>
</div>
</div>
</main>
Not sure if it solves your problem in the best way, but this works:
.remaining {
flex: 1;
/* display: flex; */
flex-direction: column;
position: relative;
}
.grid {
border: solid #008080 thick;
/* flex: 1; */
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I am currently using CSS grid, and I'm using the grid-row-gap and column-row-gap many places. My problem is that when doing media queries, and some elements/divs are not to be shown at smaller resolution I usually just set them to display: none. However, if I'm not mistaken, even though the element can be seen, the row or column gap feature still applies on the "hidden" element.
Is there any way to fix this, or am I doing something wrong here?
EDIT:
Okay, it seems like display: none don't affect the grid-row-gap - which makes sense. But I found a small workaround by removing the grid-gap and adding a padding instead when the resolution changes. And that seems to do the trick.
Thanks for all the answers.
Is there any way to fix this [...]?
One simple fix when applying display: none; to child elements in a CSS grid, is to remember to alter the parent grid accordingly to take account of the fact that those child elements are no longer displayed.
Working Example:
body > div {
display: inline-grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
grid-row-gap: 6px;
grid-column-gap: 12px;
width: 120px;
height: 120px;
margin-right: 24px;
border: 1px solid rgb(255, 0, 0);
}
div div {
border: 1px solid rgb(255, 0, 0);
}
body > div:hover div:nth-of-type(n+7) {
display: none;
}
body > div:nth-of-type(2):hover {
grid-template-rows: auto auto;
height: 80px;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
In both the CSS Grids above the final three child elements are removed from display on :hover. But in the second grid (only) the height of the parent and the number of grid-template-rows are also reduced, thus avoiding displaying a gap which the non-displayed child elements used to occupy.
You can do this if you use grid-auto-columns (or grid-auto-rows) because the column definitions are dynamic, therefore no column exists if the item is hidden.
In this example I'm using grid-auto-flow: column which is sort of similar to flex-direction: row in this example. It's easier to visualize what's going on if they are columns vs. rows.
Note: grid-auto-flow is supported in IE, but *-auto-columns is.
Important: Don't confuse this with grid-template-columns: auto !
.outer-container
{
background: yellow;
outline: 1px solid black;
}
.container
{
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-gap: 10px;
}
.item
{
background: steelblue;
padding: .5em 1em;
color: white;
}
.item.hidden
{
display: none;
}
<div class="outer-container">
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item hidden">Item 3 (hidden)</div>
</div>
</div>
Is it possible to collapse the width of a CSS grid with auto-filled columns to the minimal width required to have equal width columns that are centered with respect to the grid container?
IE if I have grid defined like this:
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
and the grid-container is 800px wide, is there a way to ensure the grid itself is only 600px wide instead of 800px?
Since I'm not sure how to explain it properly I've made a fiddle: https://jsfiddle.net/mhozx4ns/10/
I'm looking for a way that makes the top container behave like the bottom one if it is wider than what is required to place all children in one row.
body {
width: 800px;
background: black;
}
.grid div {
height: 50px;
background: #ededed;
}
.css {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-column-gap: 64px;
grid-row-gap: 64px;
background: red;
}
.manual {
width: 664px;
margin: 32px auto 0;
background: blue;
}
.manual:after {
content: '';
display: table;
width: 100%;
}
.manual.grid div {
width: 300px;
float: left;
margin-bottom: 64px;
}
.manual.grid div:nth-of-type(even) {
margin-left: 64px;
}
.manual.grid div:last-child {
margin-bottom: 0;
}
}
<div class="css grid">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="manual grid">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
When you say minmax(300px, 1fr) in your rule, you're saying this:
Each column must be a minimum width of 300px and a maximum width of 1fr.
The fr unit consumes free space in the grid container. So if your container is 800px wide, the fr will factor in all that space.
Also, since fr consumes all free space, justify-content, which functions by distributing free space, is rendered useless.
Why not just remove the 1fr?
body {
width: 800px;
background: black;
}
.css {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fill, 300px);
grid-auto-rows: 50px;
grid-column-gap: 64px;
grid-row-gap: 64px;
background: red;
}
.grid div {
background: #ededed;
}
<div class="css grid">
<div></div>
<div></div>
<div></div>
</div>