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>
Related
I have this grid over here:
and i want the first big card to take the whole height of the wrapper and remain the same width, while the bottom two cards go to the right, somehow like this:
here's my css/html code where item-1 is the bigger card on the top-left:
.cards-wrapper {
background-color: #43cbff;
width: 1240px;
height: 380px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
#media (min-width: 30em) {
grid-template-columns: 1fr 1fr;
}
#media (min-width: 60em) {
grid-template-columns: repeat(4, 1fr);
}
}
.cards {
display: flex;
flex-direction: column;
min-height: 100%;
position: relative;
top: 0;
background-color: aquamarine;
border: 1px solid lightgrey;
border-radius: 8px;
}
.item-1 {
#media (min-width: 60em) {
grid-column: 1 / span 2;
h1 {
font-size: 24px;
}
}
}
You can keep the grid layout and use grid-template-areas to make that first item take up the full height whilst retaining its existing width.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
gap: 8px 8px;
grid-auto-flow: row;
grid-template-areas:
"one one two three"
"one one four five";
}
.container * {
background: orange;
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
Flex version
I dont know you entire structure and your requirement. But by using only flexbox you can archive this also quite easy.:
.cards-wrapper {
background: gray;
}
.flex {
display: flex;
gap:5px;
}
.left, .right {
width: 50%;
}
.right {
flex-wrap: wrap;
justify-content: center;
}
.right > div {
width: 49,2%;
background-color: lightgreen;
height:100px;
}
.big {
background-color: green;
width: 100%;
}
<div class="cards-wrapper flex">
<div class="left flex">
<div class="big">BIG</div>
</div>
<div class="right flex">
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
I have a parent grid of 12 columns and a gap of 24px between each column. I want to render a child grid that will start from end of column 1 or start from first gap and end to the last gap, How can I achieve this?
Here's an example of what I want:
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 24px;
}
.grid div {
grid-column: ???;
}
<div class="grid">
<div></div>
</div>
make the element to span from the second column to before the last column then use negative margin:
.grid {
border: 1px solid;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 24px;
}
.grid div {
height: 100px;
background: red;
grid-column: 2 / -2;
margin: 0 -24px;
}
<div class="grid">
<div></div>
</div>
You can also do it like below:
.grid {
border: 1px solid;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 24px;
}
.grid div {
height: 100px;
background: red;
grid-column: 2 / -2;
width: calc(100% + 48px);
justify-self: center;
}
<div class="grid">
<div></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 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>
The following code works as expected: the cells are filled with colors between defined lines
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 2/4;
}
#item3 {
background-color: blue;
grid-column: 4/7;
}
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
I then tried to swap the last two elements (yellow and blue), by swapping the grid-column entries:
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 4/7;
}
#item3 {
background-color: blue;
grid-column: 2/4;
}
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
item3 is not correctly displayed. I suppose that this is because item2 has been rendered further in the grid and the earlier element cannot be rendered anymore (wild guessing).
I am lost at how the order of the elements in the HTML is influenced by the placement of elements in the CSS, as explained in the documentation? Shouldn't the order in the HTML be insignificant?
The items are inserted one by one into the grid in the order of appearance in the html and according to their specified placement. The placement algorithm does not try to fill any previous gaps.
Note: By default, the auto-placement algorithm looks linearly through the grid without backtracking; if it has to skip some empty spaces to place a larger item, it will not return to fill those spaces. To change this behavior, specify the dense keyword in grid-auto-flow.
#grid {
display: grid;
height: 300px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 4/7;
}
#item3 {
background-color: blue;
grid-column: 2/4;
}
#item4 {
background-color: grey;
grid-column: 5/6;
}
#item5 {
background-color: orange;
grid-column: 1/7;
}
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
</div>
In your example you could either make use of the grid-auto-flow property and set it to dense as suggested by the documentation:
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
grid-auto-flow: dense;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 4/7;
}
#item3 {
background-color: blue;
grid-column: 2/4;
}
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
or you could make use of the order property to get the wished result:
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 4/7;
order: 3;
}
#item3 {
background-color: blue;
grid-column: 2/4;
order: 2;
}
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
or, as suggested by GCyrillus, force the third item to be placed in the first row by using the grid-row property:
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 4/7;
}
#item3 {
background-color: blue;
grid-column: 2/4;
grid-row: 1;
}
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>