Lets suppose I have parent container with fixed height:
.container {
max-height: 100px;
}
This container contains a grid, which has to be take the whole height, and if cell's content doesn't fit, it has to be scrollable.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
But if content of grid's cells is too big vertically, the grid is blowout the parent container, and I have no idea how to fix it.
minmax doesn't work for me in this case.
Example code:
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1 / span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
You may add max-height: inherit; to the .grid so it can inherit the max height to make the overflow works properly.
Ultimately you want to restrict height of the .grid instead of the container, since it's the children of the .grid needs to be scrollable, not .container.
.container {
min-height: 0;
max-height: 100px;
border: 1px solid red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
/* added */
max-height: inherit;
}
.grid > * {
overflow-y: auto;
border: 1px solid blue;
}
.grid .left {
grid-column: 1;
grid-row: 1/span 2;
}
.grid .right-top {
grid-column: 2;
grid-row: 1;
}
.grid .right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
Right Top Content<br>
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
Simply make the parent a flexbox container
.container {
display:flex;
max-height: 100px;
border: 1px solid red;
}
.grid {
width:100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(1px, 1fr) minmax(1px, 1fr);
}
.grid>* {
overflow-y: auto;
border: 1px solid blue;
}
.left {
grid-column: 1;
grid-row: 1 / span 2;
}
.right-top {
grid-column: 2;
grid-row: 1;
}
.right-bottom {
grid-column: 2;
grid-row: 2;
}
<div class="container">
<div class="grid">
<div class="left">
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
<div>Left Content </div>
</div>
<div class="right-top">
Right Top Content
</div>
<div class="right-bottom">
Right Bottom Content
</div>
</div>
</div>
Related
I have a 2 column layout with an image to the left and wanted to have 3 divs on the right but can only manage to get 1 div to align next to the image and the other 3 divs are below the image. How can I have all 3 divs next to the image?
I know this is easy with grid-areas but wanted to do it with out.
.wrapper {
background-color: pink;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto 1fr;
}
.hero {
background-color: red;
}
.foo {
background-color: orange;
}
.bar {
background-color: lime;
}
.baz {
background-color: aqua;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
https://codepen.io/emmabbb/pen/oNqPwad
Set a specific grid row value on your hero: grid-row: 1 / 4;
Like this:
.wrapper {
background-color: pink;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto 1fr;
}
.hero {
background-color: red;
grid-row: 1 / 4;
}
.foo {
background-color: orange;
}
.bar {
background-color: lime;
}
.baz {
background-color: aqua;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
If you want your divs with text in them to be of equal height change the grid template rows to grid-template-rows: 1fr 1fr 1fr; Like this:
.wrapper {
background-color: pink;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr 1fr;
}
.hero {
background-color: red;
grid-row: 1 / 4;
}
.foo {
background-color: orange;
}
.bar {
background-color: lime;
}
.baz {
background-color: aqua;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
I believe the easiest way to get the 3 divs on the right of the image without using grid area would be to wrap foo, bar, and baz in a parent div and use 1 row on your grid; you may have to mess with the hight of the divs on the right though.
<div class="wrapper">
<div class="hero">
<img src="https://via.placeholder.com/1080x1080" alt="">
</div>
<div>
<div class="foo">
foo
</div>
<div class="bar">
bar
</div>
<div class="baz">
baz
</div>
</div>
</div>
I hope that does what your looking for!
I want to remove the worthless margin between rows, so I want every div takes the content height without giving margin to his side div, I tried everything but nothing works.
.grids {
width: 90%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(min-content, max-content);
margin: auto;
grid-gap: 32px;
}
.grid {
position: relative;
width: 95%;
height: max-content;
margin: 10px;
padding: 20px;
background: black;
border-radius: 10px;
}
<div class="grids">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</div>
Edit: To make a masonry layout I have wrapped grid items in div tag
so you can nest as many tags as you want.
grid items overflow the content because of the width and height properties.
you're using a grid gap for both rows and columns.
So I guess this might help you out.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
grid-gap: 10px;
}
.grid-item {
padding: 20px;
background: red;
border-radius: 10px;
margin-bottom: 24px;
}
<div class="grid">
<div>
<div class="grid-item">
<h1>Hello world</h1>
</div>
<div class="grid-item">
<h1>Hello world</h1>
</div>
</div>
<div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div>
<div class="grid-item">
<h1>Hello
<br>
friend
</h1>
</div>
<div class="grid-item"></div>
</div>
</div>
Also, I renamed the classes for naming purposes only.
MDN docs grid-row: row-gap
MDN docs masonry layout: masonry layout
You can try to set grid-gap: 32px to grid-gap: 0 32px, it will remove the margin between grid rows;
help me please, how do i get a result like this in the grid? the result i want - link - img https://ibb.co/XbW025V . here is my code https://jsfiddle.net/o0zjuyqb/1/
<div class="container">
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</div>
You can do this by using grid-column: span 2;
.grid {
display: grid;
grid-auto-flow: dense;
grid-template-columns: 250px 290px 290px 250px;
grid-template-rows: repeat(2, 280px);
gap: 40px;
}
.grid div {
background: grey;
}
.grid div.wide {
grid-column: span 2;
background: green;
}
<div class="grid">
<div class="wide"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="wide"></div>
</div>
How do I go from here
To here
I'm trying to center the inner div's to their parent except for the last row where I'd like to align it left to the row above it.
Here is the jsfiddle for the top image https://jsfiddle.net/L15p2nev
.container {
text-align: center;
background-color: green;
}
.item {
display: inline-block;
width: 300px;
background-color: red;
}
<div class="container">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
</div>
Using grid display layout, this can be archived.
You can set grid-template-columns: repeat(auto-fit, 300px) to align items as the image.
.container {
background-color: green;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.item {
display: inline-block;
background-color: red;
}
<div class="container">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
</div>
I've got the following setup:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
}
.a {
background-color: green;
grid-column: 1/7;
griw-row: 1;
}
.b {
background-color: grey;
grid-column: 7/-1;
grid-row: 1;
}
.c {
background-color: blue;
grid-column: 1/7;
grid-row: 2;
}
.d {
background-color: yellow;
grid-column: 7/-1;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
The element with css class .a is dynamic and not always available. How can I shift right column (.b) to the left when .a column is not available?
Note: I can't use grid-auto-columns as IE11 doesn't support it.
Don't explicitly define the column positions. Simply set the number of column and the auto placement will do the job for you:
section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr;
grid-column-gap: 1em;
margin: 5px;
}
section > * {
grid-column: span 6; /* all the items should take 6 columns*/
}
.a {
background-color: green;
}
.b {
background-color: grey;
}
.c {
background-color: blue;
grid-row: 2;
}
.d {
background-color: yellow;
grid-row: 2;
}
<section>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>
<section>
<div class="a">
Content a
</div>
<div class="b">
Content b
</div>
<div class="c">
Content c
</div>
<div class="d">
Content d
</div>
</section>