I have a comments box that displays a lit of existing comments. This box should overlap an image and be fixed to the bottom of the image. I have overlapped the box but the 'existing-comments-container' keeps stretching to the end of the page. The expected behavior is that it stretches across the width of the image container.
Here is an image which will hopefully make it clearer:
Here is the relevant HTML:
<div class="overlay">
<div class="full-view-container">
<div class="overlay-inner-portrait">
<img [src]="image.imagePath" alt="photo" (click)="closeImage()">
</div>
<div class="existing-comments-container">
<div class="existing-comments" *ngFor="let comment of comments">
<p class="commentor-name">{{comment.name}}</p>
<p class="comment">{{comment.usersComment}}</p>
</div>
</div>
</div>
And the relevant CSS:
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.7);
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 4;
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 1;
grid-template-rows: 1;
}
.full-view-container {
display: grid;
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template: 1fr / 1fr;
}
.overlay-inner-portrait {
background: white;
width: 450px;
height: 580px;
padding: 20px;
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template: 1fr / 1fr;
align-items: end;
}
.overlay img {
width: 100%;
height: 100%;
}
.existing-comments-container {
display: grid;
grid-template-columns: 1fr;
grid-column: 1 / -1;
grid-row: 1 / -1;
align-self: end;
justify-items: center;
max-height: 100px;
background: white;
}
i found out the cause of this issue was that the text in one of the users comments box was very long and causing the boxes to stretch. I resolved this by setting a max-width on the p tag which has the class .comment
Related
enter image description here
How do I make my grid cell same size after spanning it over the next cell? This is what I have tried so far
.factory {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
height: 600px;
gap: 10px;
margin-top: 100px;
padding: 10px;
}
.factory>div {
background-color: gray;
border: 1px green solid;
}
.image-1 {
width: 100%;
height: auto;
}
.div-3 {
grid-column: 3 / span 5;
}
.div-5 {
grid-column: 1 / span 2;
}
<div class="factory">
<div class="div-1">box1</div>
<div class="div-2">box2</div>
<div class="div-3">box3</div>
<div class="div-5">box5</div>
<div class="div-6">box6</div>
</div>
As you can see box6 is smaller than the rest of the boxes.
Your issue is that on div-3 you try to span 5 columns after it has started at column 3 which will make the browser attempt to add 5 more columns to the grid.
.div-3 {
grid-column: 3 / span 5;
}
You can either remove this section completely because you have already specified in your grid-template-columns: 1fr 1fr 2fr; that the third column should be double the space of the first two.
Another option would be to span 1
.div-3 {
grid-column: 3 / span 1;
}
You can see this clearly by using the inspection tools.
.factory {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
height: 600px;
gap: 10px;
margin-top: 100px;
padding: 10px;
}
.factory>div {
background-color: gray;
border: 1px green solid;
}
.image-1 {
width: 100%;
height: auto;
}
/*.div-3 {
grid-column: 3 / span 5;
}*/
.div-5 {
grid-column: 1 / span 2;
}
<div class="factory">
<div class="div-1">box1</div>
<div class="div-2">box2</div>
<div class="div-3">box3</div>
<div class="div-5">box5</div>
<div class="div-6">box6</div>
</div>
I want to place box 2 on top of both other boxes by half of them, however, even having explicitly defined grid-template-columns propriety to 1fr it automatically creates another column.
Here is my attempt
index.html
<div class="grid-overlap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
style.scss
.grid-overlap {
max-width: 40rem;
width: 95%;`your text`
margin: 2rem auto;
gap: 1rem;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 1fr;
.box {
width: 300px;
height: 300px;
margin: 0 auto;
text-align: center;
font-size: 3rem;
}
.box:nth-child(1) {
grid-row: 1 / 3;
background-color: dodgerblue;
}
.box:nth-child(2) {
background-color: red;
grid-row: 2 / 4;
z-index: 100;
}
.box:nth-child(3) {
grid-row: 3 / 5;
background-color: tomato;
}
}
Thanks in advance.
I am giving one example of overlap, try to see how it works and use it in your use case.
.grid-overlap {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.grid-overlap .box:nth-child(1) {
grid-row: 1/3;
grid-column: 1/3;
background-color: dodgerblue;
}
.grid-overlap .box:nth-child(2) {
background-color: rgba(255, 0, 0, 0.6);
grid-row: 2/4;
grid-column: 2/4;
}
<div class="grid-overlap">
<div class="box">1</div>
<div class="box">2</div>
</div>
Looking at the grid we can see that the second square starts in the middle of the first one and that the last one is positioned at one quarter along and three quarters down the first square.
This leads to a grid of width 6 and height 7 square cells.
As it's not possible to have both the grid imensions set at 300px and the width of the grid to be defined in rems (and % units) this snippet drops the 300px settings and sets the overall grid to be the width as defined in the question and the aspect ratio 6/7.
Note that the grid gap is not set (defaults to 0) as no gap was shown in the picture given in the question.
body {
width: 100vw;
height: 100vh;
}
.grid-overlap {
max-width: 40rem;
width: 95%;
aspect-ratio: 6 / 7;
margin: 2rem auto;
gap: 1rem;
gap: 0;
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-template-columns: repeat(6, 1fr);
}
.box {
/*width: 300px;
height: 300px;*/
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
font-size: 3rem;
}
.box:nth-child(1) {
grid-column: 1 / span 4;
grid-row: 1 / span 4;
background-color: dodgerblue;
}
.box:nth-child(2) {
background-color: red;
grid-column: 3 / span 4;
grid-row: 3 / span 4;
z-index: 100;
}
.box:nth-child(3) {
grid-column: 2/ span 4;
grid-row: 4 / span 4;
background-color: tomato;
}
<body>
<div class="grid-overlap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
If the important dimensions were the 300px then use those to set the width of the overall grid.
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
Is it possible to create a layout the same as the below one in flexbox?
You can also make this layout with 3containers if you want it as flexbox.
.container {
display:flex;
width: 400px;
height: 200px
}
.container1 article, .container3 article {
width: 100px;
height: 200px;
background-color: orange
}
.container2 article {
width: 200px;
height: 100px;
background-color: red;
border: 1px solid blue
}
.container2 {
display: flex;
flex-direction: column;
}
article {
display: flex;
justify-content: center;
align-items: center
}
<section class="container">
<section class="container1">
<article>1</article>
</section>
<section class="container2">
<article>2</article>
<article>3</article>
</section>
<section class="container3">
<article>4</article>
</section>
</section>
It's not possible yet, to set all of them only in a container, you must have 3 containers.
Or you can also use CSS Grid. It's more preferred for these use cases.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
width: 400px;
height: 200px
}
article {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
background-color: orange
}
.first {
grid-column: 1/ 2;
grid-row: 1/ 3
}
.second {
grid-column: 2/ 4;
}
.third {
grid-column: 2/ 4;
grid-row: 2/ 3
}
.forth {
grid-column: 4/ 5;
grid-row: 1/ 3
}
<section class="container">
<article class="first">1</article>
<article class="second">2</article>
<article class="third">3</article>
<article class="forth">4</article>
</section>
I'm trying to make this view using grid layout where only a part of the content is scrollable.
In the example below, only 'master-list' should be scrollable.
The problem is in this line:
grid-template-rows: 40px calc(100vh - 40px);
I want to be able to define for the second row to just take up the available space, without overflowing.
Is there another way to do it besides using calc?
If I change it to grid-template-rows: 40px auto; then the main-view will get a scrollbar.
.main-view {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 40px calc(100vh - 40px);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.actions {
background: lightgreen;
grid-column: 2 / 4;
grid-row: 1;
}
.filters {
background: lightblue;
grid-column: 1;
grid-row: 1 / 4;
}
.master-list {
background: lightcoral;
grid-column: 2 / 3;
grid-row: 2 / 4;
overflow-y: auto;
}
<div class="main-view">
<div class="actions">actions</div>
<div class="filters">filters</div>
<div class="master-list">
<div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
<div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
<div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
<div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
<div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
<div>row</div><div>row</div><div>row</div><div>row</div><div>row</div><div>row</div>
</div>
<div class="details">some details here</div>
</div>
I have a basic 2-column layout: One for an image, one for text. Since the text column can potentially become quite long I'd like the image to scroll along. I can achieve that easily enough with position: sticky;, but at the end there is a third container spanning both columns. Since all three elements are in the same grid, the image with position: sticky; overlaps the third container.
Is there way to confine the image to the first grid row, without using JS or adding additional containers?
Example: https://jsfiddle.net/y27unz9L/
.element-1 is the one I want to confine to the first grid row.
<div class="grid-container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2em;
align-items: start;
}
.element-1 {
min-height: 10vh;
grid-row: 1;
grid-column: 1 / 2;
position: sticky;
top: 1em;
background: red;
}
.element-2 {
min-height: 100vh;
grid-row: 1;
grid-column: 2 / 3;
background: blue;
}
.element-3 {
min-height: 100vh;
grid-row: 2;
grid-column: 1 / 3;
background: yellow;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2em;
align-items: start;
}
.element-1 {
min-height: 10vh;
grid-row: 1;
grid-column: 1 / 2;
position: sticky;
top: 1em;
background: red;
}
.element-2 {
min-height: 100vh;
grid-row: 1;
grid-column: 2 / 3;
background: blue;
}
.element-3 {
min-height: 100vh;
grid-row: 2;
grid-column: 1 / 3;
background: yellow;
position: sticky;
}
<div class="grid-container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
</div>
Hmmm I would have element-1 to be the cell and stick something inside it. Like this https://jsfiddle.net/7pcr8fvz/.
<div class="element-1">
<div class='sticky'>
</div>
</div>
.element-1 {
grid-row: 1;
grid-column: 1 / 2;
align-self: stretch; //so it's 100% of the available height
}
.element-1 .sticky {
position: sticky; //make this element sticky
top: 1em;
background: red;
height: 10vh;
}
The problem with making .element-1 sticky is that it's relative to the grid, if you make a child sticky the child is positioned relative to .element-1.