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!
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.
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.
Need to render a grid as like table format, for example i have two rows initially followed by below css:
Step 1:
.grid-container {
display: grid;
grid-template-columns: auto;
background-color: #2196F3;
padding: 10px;
}
output:
I dynamically added one more column, but it render like below its correct only but i need row wise render the coloumn any tricky is there in css. please guide what is way to achieve.
i have one idea, that is based on order will render the grid like any other option to render,
step 2:
.grid-container {
display: grid;
grid-template-columns: auto auto;
background-color: #2196F3;
padding: 10px;
}
Output:
I expected like below:
You need to set grid-auto-flow to column and then change grid-template-columns to grid-template-rows (because you are filling the grid column-wise now).
In other words, try this in your CSS:
.grid-container {
display: grid;
grid-auto-flow: column;
grid-template-rows: auto auto;
background-color: #2196F3;
padding: 10px;
}
There's a JSFiddle at https://jsfiddle.net/h8qm5sku/3/ in case that helps