I have a two column grid layout that holds boxes of heights X and 2X (fiddle, screenshot below)
Box number two has empty space underneath it, enough empty space to fit box 3:
I want to know if it is possible to have card 3 placed in that empty space (and have card 4 take card 3's place, and card 5 take card 4's place)
I attempted this layout with flex, but I reached this same situation.
.boxes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 25px;
grid-row-gap: 25px;
}
.smallbox {
border: 2px solid black;
padding: 1em;
height: 50px;
}
.bigbox {
border: 1px solid black;
padding: 1em;
background: red;
height: 150px;
}
<div class="boxes">
<div class="bigbox">1</div>
<div class="smallbox">2</div>
<div class="smallbox">3</div>
<div class="smallbox">4</div>
<div class="smallbox">5</div>
</div>
Don't set the height on the grid items themselves.
Use grid-auto-rows at the container level, then span for the grid areas.
.boxes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 50px; /* new */
grid-column-gap: 25px;
grid-row-gap: 25px;
}
.smallbox {
grid-row: span 1; /* new */
border: 2px solid black;
padding: 1em;
}
.bigbox {
grid-row: span 3; /* new */
border: 1px solid black;
padding: 1em;
background: red;
}
<div class="boxes">
<div class="bigbox">1</div>
<div class="smallbox">2</div>
<div class="smallbox">3</div>
<div class="smallbox">4</div>
<div class="smallbox">5</div>
</div>
Related
I think this question has been asked multiple times, but I wasn't able to find an answer about when items are in the same grid-row.
I have 2 items inside a grid. I would like that the item on the right takes 2 times the space of the one on the left
I have the following.
Thanks
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 12px;
grid-template-areas: "icon text text";
border: 1px solid black;
}
.item-left {
grid-area: icon;
border: 1px solid red;
}
.item-right {
grid-area: text;
border: 1px solid blue;
}
<div class='container'>
<div class='item-left'>Left grid item: Icon I want to be small</div>
<div class='item-right'>Right grid item: Some text I want to be larger</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.left {
grid-column: 1;
background-color: red; /* Just so we can see it */
}
.right {
grid-column: 2 / end;
background-color: blue; /* ^^^ */
}
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Just use three grid columns and order the elements as such.
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item-left {
grid-area: icon;
grid-column: 1;
border: 1px solid red;
}
.item-right {
grid-area: text;
grid-column: 2 / end;
border: 1px solid blue;
}
</style>
<div class='container'>
<div class='item-left'>Left grid item: Icon I want to be small</div>
<div class='item-right'>Right grid item: Some text I want to be larger</div>
</div>
I'm trying to build a CSS layout with one or two columns (depending on page width), and a full-width "navbar" above them. I don't want to use a media query, if possible.
* { word-wrap: break-word; }
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
nav {
grid-column: 1 / -1;
}
/* only for visualisation */
#grid > * { margin: 5px; }
.col { border: 1px dashed black; }
nav { border: 1px solid blue; }
#grid { border: 1px solid red; }
<div id="grid">
<nav>full width nav</nav>
<div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
Narrow screen:
Normal screen:
However, it decides to add a third or even more empty columns if the screen is too wide. I can sort of fix it by increasing the min value in minmax, but then it overflows when the page is too narrow.
This glitch does not happen if I remove the full-width cell.
How can I fix it?
Here is a jsfiddle demo
You can simply increase the minmax width here repeat(auto-fit, minmax(300px, 1fr)) from 300px to 450px but this will cause the layout to shrink into two rows to early but in full screen will fit into it so if you don't have any problem with the shrinking to early just the bellow
Example
* {
word-wrap: break-word;
}
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
border: 1px solid red;
grid-gap: 10px;
}
nav {
grid-column: 1 / -1;
border: 1px solid blue;
}
.col {
border: 1px dashed black;
}
<div id="grid">
<nav>full width nav</nav>
<div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
But if you don't like the early shrinking the only best possible way to achieve it in ride into media queries by detecting the screen size that you want your layout to shrink into two rows then there put repeat(1, minmax(300px, 1fr)); to respect one column otherwise use repeat(2, minmax(300px, 1fr)); for two columns.
And also by that way you can easily set the minmax to zero like repeat(2, minmax(0, 1fr)); which will look great when the screen is too small
Example
* {
word-wrap: break-word;
}
#grid {
display: grid;
grid-template-columns: repeat(2, minmax(300px, 1fr));
border: 1px solid red;
grid-gap: 10px;
}
nav {
grid-column: 1 / -1;
border: 1px solid blue;
}
.col {
border: 1px dashed black;
}
#media (max-width: 750px) {
#grid {
grid-template-columns: repeat(1, minmax(300px, 1fr));
}
}
<div id="grid">
<nav>full width nav</nav>
<div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
this is a flexbox job:
* {
word-wrap: break-word;
}
#grid {
display: flex;
flex-wrap:wrap;
gap:10px;
border: 1px solid red;
}
nav {
width:100%;
border: 1px solid blue;
}
.col {
border: 1px dashed black;
flex-basis:300px;
min-width:0;
flex-grow:1;
}
<div id="grid">
<nav>full width nav</nav>
<div class="col">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="col">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
I have a problem in my project, where the size of the div varies, which shouldn't happen. I#ve put an example which shows it.
html, body, .grid-container { height: 100%; margin: 0; }
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 1px 1px;
}
._ {
display: grid;
grid-template-columns: 120px 120px;
grid-template-rows: 1fr 1fr;
gap: 1px 1px;
grid-area: 1 / 2 / 4 / 4;
}
.A { grid-area: 1 / 1 / 3 / 2;
align-self: flex-end;
border: 1px solid red;
position: relative;
}
.B { grid-area: 1 / 2 / 3 / 3;
border: 1px solid red;
position: relative;
}
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
.circle {
width: 115px;
height: 115px;
background: red;
border-radius: 100px;
}
<div class="grid-container">
<div class="_">
<div class="A">
<div class="circle"></div>
</div>
<div class="B"></div>
</div>
</div>
If you do not pu the circle div in, A & B are the same height. But as soon as you put it into the A div, the size changes to perfectly equal the one of the circle, which I totally do not want to happen.
Since I'm building a Connect 4 game and I use the Border for the "GameField" it has to stay the same size.
I've already tried adding the parameter height: 690; to the A div (every circle is 115px->6 circles = 690) but then the align end did not work anymore. I also change between align-self: end; and align-self: flex-end; but that didn't change anything...
If what Im searching for isn't possible, I would love to know how else I can achieve a outline of a specificities set of cells in a css grid.
Thank you so much in advance for helping (or at least trying) me. <3
I didn't understand literally, but you can try and use this instead of above.
I think you can add the features you want (such as height) to this code I wrote.
.grid-container {
display: inline-table;
}
._ {
display: grid;
grid-template-columns: 120px 120px;
grid-template-rows: 1fr 1fr;
gap: 1px 1px;
grid-area: 1 / 2 / 4 / 4;
}
.grid-container *:not(.circle):after {
content: attr(class);
position: absolute;
top: 0;
left: 0;
}
._ > div {
border: 1px solid red;
align-self: end;
position: relative;
display: inline-flex;
}
.circle {
width: 115px;
height: 115px;
background: red;
border-radius: 100px;
align-self: end;
}
.B {
height: 20px;
}
.C {
height: 30px;
}
.D {
height: 40px;
}
<div class="grid-container">
<div class="_">
<div class="A">
<div class="circle"></div>
</div>
<div class="B"></div>
<div class="C"></div><div class="D"></div></div>
</div>
You don't have to use css for .A and .B, you're able to use like code above. Also I added two div to better understand
If I misunderstood, send me message back, I'll check again
How to create a dynamic grid system using css3.
I'd like to achieve an overview page with multiple cards with different heights and order of displaying cards should be the same.
Cards with different heights will be displayed on the dashboard based on the config settings so it should be auto-adjusted.
Please help me to write generic css for it.
HTML:
<div class="wrapper">
<div style="height:50px" id="foo-1">One</div>
<div style="height:50px" id="foo-2">Two</div>
<div style="height:50px" id="foo-3">Three</div>
<div style="height:100px" id="foo-4">Four</div>
<div style="height:50px" class="fifth" id="foo-5">Five</div>
</div>
CSS3:
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
grid-auto-rows: auto;
grid-gap: 10px;
}
Please refer:
https://codepen.io/prashantbiradar92/pen/MWgXGpG?&editable=true
Problem:
The div with id foo-1,foo-3,foo-5 should be in 1 column and foo-2, foo-4 in 2nd column, with no whitespace. It should display in order.
So currently there is gutter for the div foo-5. So I have to adjust the div foo-5.
You need something like this?
https://codepen.io/hisbvdis/pen/XWrYqqO
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper>div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
.col-1 {
grid-column-start: 1;
}
.big {
grid-row: span 2;
}
<div class="wrapper">
<div class="col-1" id="foo-1">One</div>
<div id="foo-2">Two</div>
<div class="col-1" id="foo-3">Three</div>
<div class="big" id="foo-4">Four</div>
<div class="col-1" id="foo-5">Five</div>
</div>
I am new to grids and am basically reverse engineering a doodle calendar right now. I am using a grid container to contain all my items. The problem is that after the last column of grid items, there seems to be an extra column to take up the rest of the screen.
This is what it looks like:
I want to be able to remove the extra space on the right so the grid only takes the space of my grid items.
This is my HTML:
<body>
<div id="grid-container">
<div class="grid-item"></div>
<div class="grid-item" id="case_participants"> 0 participants</div>
</div>
</body>
This is my CSS:
#grid-container {
display: grid;
grid-template-columns: 216px repeat(var(--colNum), 72px);
background-color: white;
border: 2px solid grey;
padding: 0px;
}
.grid-item {
background-color: white;
border: 1px solid grey;
font-size: 30px;
text-align: center;
}
The rest of the items are generated with JavaScript.
You have space to the right of your grid because grid are by default block elements which take up 100% width of their parent (the body in this case). Change the container's style to display: inline-grid; to make its width the same size as its content. Example snippet below:
:root {
--colNum: 4;
}
#grid-container {
display: inline-grid;
grid-template-columns: 216px repeat(var(--colNum), 72px);
background-color: white;
border: 2px solid grey;
padding: 0px;
}
.grid-item {
background-color: white;
border: 1px solid grey;
font-size: 20px;
text-align: center;
padding: 10px;
}
<div id="grid-container">
<div class="grid-item">names</div>
<div class="grid-item">check</div>
<div class="grid-item">check</div>
<div class="grid-item">check</div>
<div class="grid-item">check</div>
</div>