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.
Related
I'm creating a Worldle clone and am trying to figure out how to get my word grid and its box elements to shrink in response to the change in height of the window. I tried messing around with different flex properties instead of using grid, but nothing seemed to get me the outcome I was looking for.
You can see the effect I am looking to recreate here by messing with the height of your window.
This is the css code I have now, where grid is reference to the grid containing the box elements.
.grid {
display: grid;
grid-template-columns: repeat(5, 30px);
grid-template-rows: repeat(5, 30px);
justify-content: center;
column-gap: 50px;
row-gap: 40px;
margin-bottom: 50px;
}
.box {
border-style: solid;
border-color: blue;
height: 4rem;
width: 4rem;
margin-bottom: 30px;
}
I'm building my first real webpage and I'm trying to figure out how to stack the elements on the home screen correctly. I've read and tried similar posts but they don't seem to do what I need. Currently my homepage looks like this (ignore the list at the bottom of the page and subscribe/ login buttons. They are just part of the default theme):
This was achieved using the following code:
HTML:
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
CSS:
#media (min-width: 1001px) {
.disc-pic-parent {
grid-column: 1 / span 3;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description{
text-align: left;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description-header{
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img{
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
grid-column: 2 / span 2;
}
}
My goal is to try and get it to look something like this sketch:
The idea of using a grid for the main layout is fine and will keep your text at a constant width even if it is too long, but you also have put a grid in your left hand box which isn't the layout your desired image shows. You have also given the img defined dimensions and yet defined column spans for the grid.
This snippet just takes it that you want the img to have the given dimensions so removes the extra grid information.
#media (min-width: 1001px) {
.desc-pic-parent {
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description {
text-align: left;
min-height: 280px;
border-top: 0;
}
.homepage-description-header {
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img {
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
}
}
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
NOTE: you probably want to take some of the styling out of the media query and have it there for all viewport dimensions.
This can be simply achieved using flexbox.
Just wrap those two div's inside another div and give display: flex to that div.
I have a CodePen at CSS Grid with Border which illustrates this issue.
HTML:
<div class="grid-properties">
<div class="column-properties">Column A</div>
<div class="column-properties">Column B</div>
<div class="column-properties">Column C</div>
</div>
CSS:
.grid-properties {
display: grid;
grid-template-columns: max-content max-content minmax( 400px, 1fr );
column-gap: 4px;
border: 1px solid black;
margin: 16px;
}
.column-properties {
background-color: lightgray;
font-size: xx-large;
padding: 4px;
}
If the width of the window reduces to the point were the third column hits the 400px min width, the column extends beyond the border of the grid.
If I use:
grid-template-columns: max-content max-content 1fr;
the behavior works as expected.
I am not sure how to fix this or if this is considered a browser bug. The behavior is consistent across multiple browser engines.
let me know if this work for you or not.
display: grid;
grid-template-columns: auto auto auto auto;
or
display: grid;
grid-template-columns: 1fr 1fr 1fr;
Based on the comment from #kvncnis, this appears to be the solution:
.grid-properties {
display: grid;
grid-template-columns: max-content max-content minmax( 400px, 1fr );
column-gap: 4px;
border: 1px solid black;
overflow-x: scroll;
}
(if anyone can add to or provide more accurate details, I would be interested)
What is going on is that overflow behavior is taking over. By adding overflow-x: scroll, the browser is told the correct thing to do when the overflow occurs.
#hi {
display: grid;
grid-template-columns: auto auto;
}
#hi > div {
border: 1px solid red;
min-height: 300px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
min-height: 300px;
}
img {
width: 100%;
height: auto;
}
<div id='hi'>
<div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
<div>erhbv</div>
<div>erhbv</div>
<div></div>
</div>
NOTE - image doesnt work correctly on embed - CODEPEN URL WORKS: https://codepen.io/anon/pen/vVeWpL
I'm new to grids and love them so far, but am very confused about this problem. For some unknown reason, the grid is stretched by the image, despite it having a width of 100%. Even if I change the width to 10%, the grid is still stretched. I've also tried ensuring the parent is 100% wide only by adding width 100%, but this also fails.
Can someone help make the grid width be 50/50, and explain what happened?
Can someone help make the grid width be 50/50, and explain what happened?
To address the first part of your question/request; to divide the grid into two equally-sized columns you could simply specify discrete dimensions, for example in place of:
grid-template-columns: auto auto;
You could instead use:
grid-template-columns: 1fr 1fr;
#hi {
display: grid;
grid-template-columns: 1fr 1fr;
}
#hi>div {
border: 1px solid red;
min-height: 300px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
min-height: 300px;
}
img {
width: 100%;
height: auto;
}
<div id='hi'>
<div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
<div>erhbv</div>
<div>erhbv</div>
<div></div>
</div>
JS Fiddle demo.
Or make use of the repeat() function to do the same thing:
grid-template-columns: repeat(2, 1fr);
#hi {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
#hi>div {
border: 1px solid red;
min-height: 300px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
min-height: 300px;
}
img {
width: 100%;
height: auto;
}
<div id='hi'>
<div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
<div>erhbv</div>
<div>erhbv</div>
<div></div>
</div>
JS Fiddle demo.
While I've used the fr unit in the above examples other dimensions could, of course, be used (such as 50% 50%/repeat(2, 50%) and so on); 1fr simply allocates a fractional unit, determined by the preceding number, of the available space.
With regards to the latter part of your question, I can only offer an observation as to what happened — but without reference to the specifications — but I believe that the use of the auto keyword allowed the contents of the grid-item (the <div> containing the <img>) to dictate the size of that element. Quite why it produced the end-result, though, I'm afraid I don't know (I suspect others, however, will offer a far better explanation).
Reference:
repeat() function.
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/