I'm trying to make .container (the div with yellow border) take the full width of its parent (body), that is screen width, I don't know what makes it narrow and centered like that
.container {
background: url("https://image.ibb.co/e7L09w/rsz_pexels_photo_540518.png") no-repeat fixed center bottom;
background-size: cover;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 120px 1fr 150px;
border: 2px solid yellow;
width: 100%;
height: 100%;
See pen below :
https://codepen.io/mrassili/pen/wPxpgL
As #Temani Afif said, you are using Bootstrap, and therefore the class .container will give the div a max-width.
Use the class container-fluid instead, it has no max-width, thus the width will be screen-sized.
Related
I have an svg image (with the class content__img) has a default width of 760.7 and height of 687.08,
in the grid container there are 2 columns and 2 rows of `` `1fr```, this image is found
in the first cell, and since the image size is bigger than the first row,
the image enlarges the height of the row:
taking this into account
1.- If I specify that the image has a height
from 100% the image does not fit the height of the first row
Why is this happening? Shouldn't it be the size of the row at that moment?
Because with block type elements (and the other elements in general)
if they take the size of the current row, as far as I know, by default they take the width and height of the cell
(it also doesn't work assigning display: block to the image)
HTML:
<body>
<div class="content">
<img class="content__img" src="../../assets/images/test.svg" alt="Test">
</div>
</body>
CSS:
.content {
width: 80%;
height: 80%;
background-color: beige;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.content__img {
height: 100%;
}
2.- If I wrap the image in a container div
(with class content__img-box), this also doesn't work, despite
that the div takes the width and height of 100% of the cell, therefore, if I set the height of the image to 100%, why does the image
doesn't take the 100% from the div (content__img-box)?
HTML:
<body>
<div class="content">
<div class="content__img-box">
<img class="content__img" src="../../assets/images/test.svg" alt="Test">
</div>
</div>
</body>
CSS:
.content {
width: 80%;
height: 80%;
background-color: beige;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.content__img {
height: 100%;
}
This is the result I want (obviously you can give a fixed or non-dynamic size to the row and that works, but the purpose is that the image is attacked if the grid container grows):
As promised, the explaination:
The grid-template-rows: 1fr 1fr; will not work as you intend to. Unfortunatly 1fr as template-row is counter-intuitive. It will not care for the parents height at all. 1fr 1fr will take the heighest row height of both rows and add the same height for the other row aswell. As such the containers height will be overwritten and as such broken. for 50% 50% to work, you need to to give the grid-contaienr a specific height!
I wrapped the images inside a <div>. The whole reason to do this, is to add a the object-fit property. This will allow me to resize the image to fit inside the containing <div> without breaking its aspect-ratio and without being clipped. I added a max-height-width: 100%; to the image itself. This will down-size the image to fit inside the container (not overflow the container). But also allows the image to be smaller then the container. If I wouldnt add this but use a fixed 100%, the image aspect-ratio would be changed as the image then would fill the entire height and width no matter of the aspect ratio.
Also I added display:flex, justify-content: center; align-items: center;. This will move the image into the center of the grid-card if the image does not fill out the entire grid-card.
.content {
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50% 50%;
}
.content > div {
display: flex;
justify-content: center;
align-items: center;
object-fit: contain;
}
.content > div > img {
max-height: 100%;
max-width: 100%;
}
/*for demonstration purpose only */
body {
margin: 0;
}
.content > div {
border: 2px solid red;
}
<div class="content">
<div>
<img src="https://via.placeholder.com/1024x720.svg">
</div>
<div>
<img src="https://via.placeholder.com/800.svg">
</div>
<div>
<img src="https://via.placeholder.com/1920x1080.svg">
</div>
<div>
<img src="https://via.placeholder.com/150x300.svg">
</div>
</div>
I have a section containing a picture tag. The picture tag is done with a srcSet of images for responsive design and using multiple pictures without downloading the pictures that are not being in use.
We need to center the text on said container, so I have a div with display: grid inside. This is absolute positioned and using height: 100% and width: 100%.
Using align-self: center on the child works perfectly on Chrome and Firefox, but to not my surprise, Safari decided to not cooperate. I discovered that if I set the section (or the grid) to a set height (ie: height: 5000px) it actually aligns itself to the center of the div, which makes me think Safari does not want to align-self: center and a unkown sized div.
There are multiple ways to solve this, but we a using our own library that is using grid, that's why I would like to solve it using align-self: center as we can just pass the prop to the React Component.
Do you guys know a workaround?
Here I left a fiddle. If you visit it on Chrome or Firefox, it works, but if you visit it on Safari, it does not. I also commented a line where I set a specific height to prove that it works with that on Safari.
Thanks!
.container {
position: relative;
}
.grid {
position: absolute;
height: 100%;
/* height: 1000px; */
width: 100%;
top: 0;
background-color: rgba(255, 255, 255, 0.75);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.cell {
grid-column: 1 / span 1;
align-self: center;
}
img {
width: 100%
}
<div class='container'>
<img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
<div class='grid'>
<div class='cell'>
Hello
</div>
</div>
</div>
The problem is that Safari does not recognize a percentage height unless the parent has a defined height. That's old school CSS. Other browsers have evolved past that requirement, now accepting other references for percentage heights.
So, if you're going to use a percentage height on .grid, the parent needs a fixed height for it to work on Safari. Or, set percentage heights on the ancestors all the way up to the root element.
/* NEW */
html, body, .container, img {
height: 100%;
}
.container {
position: relative;
}
.grid {
position: absolute;
height: 100%;
/* height: 1000px; */
width: 100%;
top: 0;
background-color: rgba(255, 255, 255, 0.75);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.cell {
grid-column: 1 / span 1;
align-self: center;
}
img {
width: 100%
}
<div class='container'>
<img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
<div class='grid'>
<div class='cell'>
Hello
</div>
</div>
</div>
More details:
Chrome / Safari not filling 100% height of flex parent
Working with the CSS height property and percentage values
I'm trying to implement a react-slick carousel but I'm having trouble getting the image to vertically center. This problem is demonstrated here.
https://codesandbox.io/s/react-slick-playground-o7dhn
Here is the problems
Images are not centered:
Flexbox property does not work (the red div is a flexbox with justify-content: center;
align-items: center;)
margin:auto only works for horizontal alignment (which I shouldn't have to set if I'm using flexbox)
I can not get rid of the top margin (even with padding:0px on the div and margin-top:0px on the image) As a consequence, any image with the height of 400px or more gets shifted and cut off (div has the height of 400px)
How do I fix it.
img {
margin: auto;
height: 200px;
width: 200px;
}
.slick-slide > div {
display: grid;
place-items: center;
width: 80%;
margin-top: 50px;
margin: auto;
height: 500px;
padding: 0px;
background: red;
}
This is working right now. I just changed display flex to grid, and made place-items centered
I have a problem with setting up my grid container responsively so that it would stretch it's height to the content. The grid itself cranks allright when the window is resized, unfortunately the container keeps the same height even though I'm using min-height property which results in showing just 3 cells out of 9. Overflow: visible doesn't solve my problem either. Thanks for your help!
CSS:
#grid_content {
position: absolute;
right: 0;
top: 100px;
width: calc(100% - 220px);
padding-bottom: 50px;
z-index: -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(250px, 28vh));
min-height: 80vh;
}
.grid {
position: relative;
width: 100%;
height: 100%;
display: block;
float: left;
}
You probably need something like this, comment out:
grid-template-rows: repeat(auto-fit, minmax(250px, 28vh));
and introduce two new classes, one for the minimal height, other one for maximal height - like in this example:
JSFiddle
Remove the comment on "overflow: hidden" part to see final result.
I'm using the following grid layout:
grid-template-columns: 10em 1fr 10em;
grid-template-rows: 2em 1fr 2em;
To create a centered area that fills most of the screen while leaving some padding around it. Inside this 1fr x 1fr grid area is a pane div which contains an editor div which contains a content div.
The content div can be any height, and the editor div has overflow: scroll set. My problem is that instead of pane staying the same size and editor handling the overflow, pane grows and causes the whole page to scroll.
I can keep pane from growing by setting its overflow: scroll, but this causes the editor itself to scroll, rather than its content. This is unacceptable because the editor has buttons which must always be on screen.
Is there a way, within grid layout, to allow this functionality? I originally had it working with a flex layout, where the pane div was a single item within a 100% x 100% flexbox. I switched to grid to allow me to easily resize side-menus, so implementing this without grid is not preferable.
Also, multi-browser support would be amazing, but my target browser is Chrome.
Here's a jsfiddle with my reproducing my problem.
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#site {
width: 100%;
height: 100%;
background-color: #000;
display: grid;
grid-template-rows: 10em 1fr 10em;
grid-template-columns: 2em 1fr 2em;
grid-template-areas:
'top top top'
'lpn mid rpn'
'bot bot bot';
}
#pane {
grid-area: mid;
height: 100%;
width: 100%;
background-color: #f0f;
}
#editor {
display: relative;
overflow: scroll;
}
#content {
height: 2000px;
}
<div id='site'>
<div id='pane'>
<div id='editor'>
<div id='content'>
</div>
</div>
</div>
</div>
min-width: auto / min-height: auto
Generally speaking, a grid item cannot be smaller than its content. The default minimum size of grid items is min-width: auto and min-height: auto.
This often causes grid items to overflow their grid areas or grid containers. It also prevents scrollbars from rendering on the items, since an overflow condition can't be triggered (the grid item just keeps expanding).
To override this default (and allow grid items to shrink past their content size) you can use min-width: 0, min-height: 0 or overflow with any value other than visible.
This behavior, with references to official documentation, is explained in this post:
Prevent content from expanding grid items
1fr
Another thing to note is that 1fr means minmax(auto, 1fr). This means, again, that the track to which it is applied cannot shrink below the content size (i.e., the min value in the minmax() function is auto, meaning content-based).
Therefore, to override this setting, use minmax(0, 1fr) instead of 1fr.
More details here: https://github.com/w3c/csswg-drafts/issues/1777
revised demo (tested in Chrome, Firefox and Edge)
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#site {
width: 100%;
height: 100%;
background-color: #000;
display: grid;
/* grid-template-rows: 10em 1fr 10em; */
grid-template-rows: 10em minmax(0, 1fr) 10em; /* new */
grid-template-columns: 2em 1fr 2em;
grid-template-areas:
'top top top'
'lpn mid rpn'
'bot bot bot';
}
#pane {
grid-area: mid;
height: 100%;
width: 100%;
background-color: #f0f;
overflow: auto; /* new */
}
#editor {
/* display: relative; */
/* overflow: scroll; */
}
#content {
height: 2000px;
}
<div id='site'>
<div id='pane'>
<div id='editor'>
<div id='content'></div>
</div>
</div>
</div>
jsFiddle demo
Not 100% sure if this is what you're asking. I added a wrapper to content to make it scrollable, and set a vh height on it, which you could adjust.
#content-scroll {
height: 40vh;
overflow: scroll;
}
#content {
height: 2000px;
}
<div id='site'>
<div id='pane'>
<div id='editor'>
<div id='content-scroll'>
<div id='content'>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/16owL8x0/