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>
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;
}
When i use the responsive tool of Chrome(<699pw) it create a huge gap between the footer and the div base but i want the footer a the bottom of the page. I don't know if it is the grid of the parent . I want to extend the base and make it closed to the footer so even if we extend the responsive tool. So it'has to follow the footer
header {
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 30px;
position: relative;
top: 50%;
}
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 3; }
#bases{
display: grid;
grid-template: auto;
grid-template-columns: 2fr 4fr;
}
html,body{
margin: 0;
padding: 0;
}
/* Responsive */
#media (max-width: 699px){
#Titre {
display: none;
}
header {
background-color: #aa1010;
font-family: 'LexendTera';
color: white;
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 10px;
position: relative;
top: 50%;
}
aside{
display: none;
}
#bases{
display: grid;
grid-template-columns: 1fr;
}
.parent{
display: grid;
align-items: center;
}
/* Mettre footer en bas de page */
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="fr">
<body>
<header>
<img src="img/logo.png" alt="logo" id="logo">
<h1 id="Titre">O'kebab</h1>
Composition
Connexion
</header>
<div id="bases">
<main>
<h1>"La maison du sandwich"</h1>
<div class="parent">
<div class="div1"><h1>Promotion</h1><p>Kebab Végetarien -50%</p> </div>
<div class="div2"><img src="img/vege.png" alt="vege"></div>
<div class="div3"><h1>Kebab du mois</h1><br><p> Kebab spicy</p></div>
<div class="div4"><img src="img/spicy.webp" alt="spicy"></div>
<div class="div5"><button>Commandez</button></div>
</div>
</main>
</div>
<footer>
<h2 id="contact">Contact</h2>
<h2 id="mention">Mentions légales</h2>
<img src="img/facebook.png" alt="facebook" id="face">
<img src="img/instagram.png" alt="instagram" id="insta">
<img src="img/iutly.png" alt="twitter" id="ly1">
<h3 id="tkt">© 2022 O'kebab</h3>
</footer>
</body>
</html>
I tried to use position:relative for the body but nothing change
The grid is fine,
In the screen size less than 699px width:
You made the header smaller by reducing its font size. And since a div is a block element by default, it would be positioned in a new line after the last element. So your "bases" div would be on top and attached beneath the header.
You forced the footer to be positioned fixed and go to the bottom of the page.
So naturally, there would be a gap between your "bases" and your "footer".
Now since the element positioned fixed is removed from the normal document flow, and no space is created for it on the page, you can't position the "bases" div relative to the "footer".
But, for fixing the gap between your divs there are many ways...
For example, you can add a height to your "bases" div and make it fill the gap.
If you want it to be responsive, instead of an absolute height you can give it a relative height, like using "%" or "vh":
#bases {
/* Relative to % of the height of the viewport */
height: 80vh;
}
And you can adjust the position of contents by "display flex" and "align-items" or maybe using padding and margins.
You can also make it "position absolute" as well and position it somewhere in the middle of the page. as I said there are many ways to fill that gap.
And a quick tip for using media queries, If you want to change an attribute of an element, you don't need to write all of its attributes again.
for example, if you have this code and you want to change its font size:
.header {
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 30px;
position: relative;
top: 50%;
}
You can just change the font size, and there is no need to duplicate all of that code:
#media (max-width: 699px) {
.header {
font-size: 10px;
}
}
When I add this code:
place-items: center;
My elements center, but only the text has a background-color applied.
When I remove this code:
place-items: center;
The background-color covers the whole column but the text isn't centered anymore.
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px;
grid-gap: 20px;
place-items: center;
}
p {
background-color: #eee;
}
<body>
<main>
<p>box1</p>
<p>box2</p>
<p>box3</p>
<p>box4</p>
</main>
</body>
Why is this happening? How can I center the content and have the background color apply to the whole column?
Without place-items: center; your grid items will get stretched to cover all the area (the default behavior in most of the cases) that's why the background will the cover a big area:
With place-items: center; your grid item will fit their content and they will be placed in the center; thus the background will cover only the text.
To avoid this, you can center the content inside the p (your grid item) instead of centering the p. Don't forget to also remove the default margin to cover a bigger area:
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px;
place-items: stretch; /* this is the default value in most of the cases so it can be omitted */
grid-gap: 20px;
}
p {
background-color: #eee;
/* center the content (you can also use flexbox or any common solution of centering) */
display: grid; /* OR inline-grid */
place-items: center;
/**/
margin: 0;
}
<main>
<p>box1</p>
<p>box2</p>
<p>box3</p>
<p>box4</p>
</main>
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.
I have a CSS grid layout - for this question I will use a simple example -> 1 row, 4 columns (2 areas).
In grid areas, I have a text with different font sizes. I would like to align the text to each other but can't figure it out.
I didn't find similar questions but maybe I searched for wrong phrases.
EDIT: Both must be aligned to the bottom line. Font-size is calculated. Code and example have been modified.
.timer {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr auto auto 1fr;
grid-template-areas: "status status status timer";
}
.timer-label {
grid-area: status;
display: flex;
font-size: calc(1em + 3vw);
background-color: blue;
align-items: flex-end;
}
.timer-value {
grid-area: timer;
font-size: calc(1em + 9vw);
background-color: green;
}
<div class="timer">
<div class="timer-label">
<span>Processing...</span>
</div>
<div class="timer-value">
<span>00:55</span>
</div>
</div>
Result:
Expected result:
I would like to have the bottom of "Processing..." text aligned to the bottom of the timer so both are in the same line (red line on print screen).
JS Fiddle:
https://jsfiddle.net/sores/m1uhLewy/7/
Make Following change in your CSS Code
.timer {
align-content: start;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr auto auto 1fr;
grid-template-areas: "status status status timer";
}
.timer-label {
grid-area: status;
display: flex;
font-size: 30px;
background-color: blue;
align-items: flex-end;
line-height: 70px; /* Add this Line */
}
.timer-value {
grid-area: timer;
font-size: 75px;
background-color:green;
line-height: 70px; /* Add this Line */
}
Explanation: The problem is your font size is different for the Processing text and the time causing the issue in height, You can specify the line-height property and make the design consistent. You can adjust the value of line height based on your preference.
One trick is to bring the font-size of each section to the other one in order to get the same basline. You can do it with by using pseudo element like below:
.timer {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr auto auto 1fr;
grid-template-areas: "status status status timer";
}
.timer-label {
grid-area: status;
font-size: calc(1em + 3vw);
background-color: blue;
}
.timer-value {
grid-area: timer;
font-size: calc(1em + 9vw);
background-color: green;
}
/**/
.timer-value:before {
content:"";
font-size: calc(1em + 3vw);
}
.timer-label:before {
content:"";
font-size: calc(1em + 9vw);
}
<div class="timer">
<div class="timer-label">
<span>Processing...</span>
</div>
<div class="timer-value">
<span>00:55</span>
</div>
</div>
in class .timer-label just change align-items: center; that's it