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;
}
Related
Original Code
section.new-features {
.new-features-right-col {
.wrapper-newfeatures {
margin-top: 3em;
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-column-gap: 31px;
grid-row-gap: 30px;
}
}
Media Query
section.new-features {
.wrapper-newfeatures {
display: grid;
grid-template-columns: auto;
grid-gap: 2em;
width: 90%;
}
}
}
Problem
I'm having difficulties overriding CSS Grid Properties within my media query section. Whenever I set the grid-template-columns: auto; which is only suppose to use one (1) grid column it gets overridden by the original code and uses six columns. I tried to troubleshoot this by using a ancestor element by typing body behind the CSS class but this doesn't seem to work. If anyone could assist me with this problem or help me approach this, it would be highly appreciated!
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.
This question already has an answer here:
Why display grid with 100% in grid-template-columns goes out of body?
(1 answer)
Closed 2 years ago.
I have a grid that is causing a horizontal scroll bar I do not want, I have tried several things including putting my grid inside other divs. Here is the code in css for the grid.
.page-grid {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 60% 40%;
grid-template-areas:
"ONE TWO"
"THREE THREE"
;
align-items: center;
justify-content: center;
text-align: center;
grid-gap: 20px;
margin-top: 70px;
background: White;
max-width:100%;
box-sizing: border-box;
}
With grid-template-columns: 60% 40% you already say that the whole width is supposed to be used. Adding grid-gap: 20px extends it even further, causing the horizontal scroll bar.
Instead you can write grid-template-columns: 3fr 2fr
fr stands for fractions and has basically the same effect, except of not causing the extra pixels needed. It will adjust all the spacing of the grid-gap automatically.
.fractions {
display: grid;
grid-template-columns: 3fr 2fr;
grid-gap: 20px;
margin-bottom: 30px;
}
.grid-element {
height: 80px;
background: #00ff00;
}
<div class="fractions">
<div class="grid-element"></div>
<div class="grid-element"></div>
</div>
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.
#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.