This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 2 years ago.
I have made a demo to demonstrate my problem
<style>
.main {
display: grid;
grid-template-rows: 1fr auto;
background-color: red;
width: 300px;
height: 120px;
}
.top {
height: 50px;
background-color: blue;
}
.bottom {
display: grid;
grid-template-columns: minmax(100px, 30%) auto;
column-gap: 10px;
margin: 10px;
}
.left {
background-color: green;
max-height: 100%;
overflow-y: scroll;
}
.right {
background-color: yellow;
}
</style>
<div class="main">
<div class="top">My content</div>
<div class="bottom">
<div class="left">Left hkjs ajsgf dh a sk si sk dils k lkao one sp shek siej</div>
<div class="right">Right</div>
</div>
</div>
The green div exceeds the height of its parent div. I want the green div to be within the red div and have a scroll bar whenever the content exceeds the height of the parent.
I don't know how clear I have explained my problem but please help me.
Add min-height:0 to the parent element.
<style>
.main {
display: grid;
grid-template-rows: 1fr auto;
background-color: red;
width: 300px;
height: 120px;
}
.top {
height: 50px;
background-color: blue;
}
.bottom {
display: grid;
grid-template-columns: minmax(100px, 30%) auto;
column-gap: 10px;
margin: 10px;
min-height:0;
}
.left {
background-color: green;
max-height: 100%;
overflow-y: scroll;
}
.right {
background-color: yellow;
}
</style>
<div class="main">
<div class="top">My content</div>
<div class="bottom">
<div class="left">Left hkjs ajsgf dh a sk si sk dils k lkao one sp shek siej</div>
<div class="right">Right</div>
</div>
</div>
Related
I'm trying to use the grid layout for two columns in one row which can be easily achieved by flex. I have to create one more div for flex but the grid doesn't need one more div.
The problem with the grid is that it will divide the width space by 2 (cannot align to start/left) and that's not what I want, please refer to the first example below and you will understand.
Is there any way to use the grid in this situation but we can align the items to the left like in the second example?
#main-1 {
display: grid;
gap: 30px;
grid-teplate-column: repeat(2, minmax(0, 1fr));
}
.test-1 {
background-color: orange;
grid-area: span 1 / span 2;
}
.test-2 {
background-color: gray;
width: 150px;
}
#main-2 {
display: flex;
gap: 30px;
margin-top: 30px;
}
.test-3 {
background-color: orange;
width: 100%;
}
.test-4 {
background-color: gray;
width: 150px;
}
.test-1,
.test-2,
.test-3,
.test-4 {
height: 60px;
}
<h1>Grid</h1>
<div id="main-1">
<div class="test-1"></div>
<div class="test-2"></div>
<div class="test-2"></div>
</div>
<h1 style="margin:30px 0 0 0;padding-top:15px;border-top: 3px solid #000;">Flex</h1>
<p style="margin:0 0 30px 0;">This is the desired layout but with one more extra div</p>
<div>
<div class="test-3"></div>
<div id="main-2">
<div class="test-4"></div>
<div class="test-4"></div>
</div>
</div>
Edited
Inline-block might work but we cannot control how many items should be on each row. Imagine the width of the first div .first is dynamic and we do not know how wide it would be(but I will make it 30px for illustration). Now the desired layout should be only one .first and one .second on each row.
By inline-block it would appear that now each row is one .first, one .second, and one .first. Check out the example below. Because we cannot control the amount like grid on each row.
#main {
width: 120px;
}
.first,
.second {
display: inline-block;
height: 60px;
}
.first {
background-color: orange;
width: 30px;
}
<div id="main">
<div class="first"></div>
<p class="second">hhhhhh</p>
<div class="first"></div>
<p class="second">hhhhhh</p>
<div class="first"></div>
<p class="second">hhhhhh</p>
</div>
Define the columns as auto and keep only one at 1fr then you can align to the left.
#main-1 {
display: grid;
gap: 30px;
/* update "5" based on your needs */
grid-template-columns: repeat(5,auto) 1fr;
justify-content: left; /* align to left */
}
.test-1 {
background-color: orange;
grid-column: 1/-1; /* take all the columns */
}
.test-2 {
background-color: gray;
width: 150px;
}
#main-2 {
display: flex;
gap: 30px;
margin-top: 30px;
}
.test-3 {
background-color: orange;
width: 100%;
}
.test-4 {
background-color: gray;
width: 150px;
}
.test-1,
.test-2,
.test-3,
.test-4 {
height: 60px;
}
<h1>Grid</h1>
<div id="main-1">
<div class="test-1"></div>
<div class="test-2"></div>
<div class="test-2"></div>
</div>
<h1 style="margin:30px 0 0 0;padding-top:15px;border-top: 3px solid #000;">Flex</h1>
<p style="margin:0 0 30px 0;">This is the desired layout but with one more extra div</p>
<div>
<div class="test-3"></div>
<div id="main-2">
<div class="test-4"></div>
<div class="test-4"></div>
</div>
</div>
.flex-container {
display: flex;
width: 200px;
height: 100px;
padding: 10px;
background-color: green;
}
.flex-item {
min-width: 0;
height: 100%;
flex: 0 1 50%;
}
.flex-item-1 {
margin-right: 50px;
background-color: red;
}
.flex-item-2 {
padding-left: 50px;
background-color: rgb(15, 36, 221);
}
<div class="flex-container">
<div class="flex-item flex-item-1"></div>
<div class="flex-item flex-item-2"></div>
</div>
Flex items dont shrink equally when padding is add to one of them no matter what you do.
Is it possible to make items grow equally or shrink equally if one of them have padding?
I found an answer in beatifully written articles on css tricks - https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/
The conclusion is - padding and borders of flex items do not participate in flex-grow or flex-shrink calculations and act as they were taking space outside of those items.
Use CSS grid in this case
.flex-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 200px;
height: 100px;
padding: 10px;
gap: 50px;
background-color: green;
}
.flex-item-1 {
background-color: red;
}
.flex-item-2 {
padding-left: 50px;
background-color: rgb(15, 36, 221);
}
<div class="flex-container">
<div class="flex-item flex-item-1"></div>
<div class="flex-item flex-item-2"></div>
</div>
I was trying to make a design in which there are 2 grid items i.e. left and right. I was trying to make the design fluid so that left can take a minimum of its width or 50%
something like min of(width, 50%)
I've tried minmax but it is just the opposite as I want. Now I'm out of options
Remember: first column would be of dynamic width. Just for testing, I've taken it 200px. It should be responsive as well.
In the below snippet I would like the second column to fill the white space between first and
second
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
background-color: cadetblue;
}
.container {
display: grid;
height: 100%;
grid-template-columns: minmax(auto, 1fr) 1fr;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
im not sure, if i got your point but you could do this:
grid-template-columns: minmax(auto, auto) 1fr;
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
background-color: cadetblue;
}
.container {
display: grid;
height: 100%;
grid-template-columns: minmax(auto, auto) 1fr;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
Flex might be what you are looking for :
Use flex which is the latest trend in CSS
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
width: 100%;
background-color: cadetblue;
}
.container {
display: flex;
height: 100%;
width: 100%;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
.wrapper{
display: grid;
grid-template-columns: minmax(200px, 7fr) 4.4fr;
grid-column-gap: 64px;
}
.block{
background: red;
height: 100px;
}
<div class="wrapper">
<div class='block block-1'></div>
<div class='block block-2'></div>
</div>
I have a simple css grid here with two columns but it doesn't work in IE 11
Can I get this working in IE ?
Here's a flex example. Every odd block will be 55% wide, and even ones will be 35% wide.
.wrapper {
display: flex;
justify-content: space-between;
}
.block {
background-color: red;
height: 100px;
}
.block:nth-child(odd) {
width: 55%;
}
.block:nth-child(even) {
width: 35%;
}
<div class="wrapper">
<div class='block'></div>
<div class='block'></div>
</div>
I have a CSS grid that occupies 100% width and 100% height of a window (the body element has display: grid;). The grid has row and column templates and elements which occupy 100% of their allocated space. However, when I add a grid-gap to the grid, it makes the grid too large for the window, forcing scrollbars to appear. How can I stop the grid-gap from adding to the dimensions of the grid - similar to how box-sizing: border-box; stops padding from adding to the dimensions of an element? Instead, I want the gaps to shrink the cells of the grid.
Thanks.
When you use "fr" it works.
Example:
HTML:
<section>
<article class="a">A</article>
<article class="b">B</article>
<article class="c">C</article>
<article class="d">D</article>
</section>
SCSS:
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-gap: 20px;
border: 10px solid blue;
article {
background-color: tomato;
&.d {
grid-column: 2;
grid-row-start: 1;
grid-row-end: 4;
background-color: olive;
}
}
}
It works same as if you used box-sizing: border-box and padding as you can see in this demo. Height is set to 100vh and you can see that if you remove or add grid-gap there is no scrollbar, you just need to remove margin from body.
body {
margin: 0;
}
.grid {
display: grid;
height: 100vh;
grid-gap: 20px;
background: #FF7D7D;
grid-template-columns: 1fr 2fr; /* Use Fractions, don't use % or vw */
}
.grid > div {
background: black;
color: white;
}
div.a, div.d {
color: black;
background: white;
}
<div class="grid">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
You could use view-port units:
vw (1% of window's width)
vh (1% of window's height)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.first { height: 40vh; }
.hori { height: 10vh; }
.second { height: 50vh; }
div > div {
float: left;
}
.left { width: 40vw; }
.vert { width: 10vw }
.right { width: 50vw; }
.first .left,
.second .right {
background: #ccc;
}
.first .right,
.second .left {
background: #000;
}
<div class="first">
<div class="left"></div>
<div class="grid-break vert"></div>
<div class="right"></div>
</div>
<div class="grid-break hori"></div>
<div class="second">
<div class="left"></div>
<div class="grid-break vert"></div>
<div class="right"></div>
</div>