Align text between CSS grid areas - html

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

Related

fill the gap between the main and the footer for responsive

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;
}
}

How to stack CSS elements horizontally for websites

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.

Is it possible to set a background-color in CSSGRID? [duplicate]

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>

CSS Grid row that expands in height only when necessary?

I'm trying to create a CSS grid with two rows. I want the row on the bottom to be fixed to 47px tall. That's easy enough. It's the top row that is giving me trouble.
I want the top row of my CSS grid to be a minimum of 250px tall, even if there is no content in the row. But if content is in there, I want the row to expand its height up to a maximum of 303px tall. That is to say, I want the row's height to grow only if the content makes that necessary.
From what I've seen with things like grid-template-rows: minmax(250px, 303px), is that it will expand to 303px if there is enough room for it to do so.
Even if there is enough room, I don't want it to expand unless it has to - that is to say, it only expands because there's content that is taller than 250px.
I have a simple grid like this:
<div class="myGrid">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
With CSS like this:
.myGrid {
display: grid;
max-height: 350px;
grid-template-rows: minmax(250px, 303px) 47px;
grid-template-columns: 1fr 2.5fr;
grid-template-areas: "a b" "c c";
}
.left {
grid-area: a;
}
.right {
grid-area: b;
}
.bottom {
grid-area: c;
}
With this code, the top row is always 303px, presumably because there's enough room to expand to that height. But I only want it to expand to that height if its content makes that necessary.
Instead of controlling the minimum and maximum heights of the row at the grid container level, control them at the grid item level.
.myGrid {
display: grid;
max-height: 350px;
grid-template-rows: auto 47px;
grid-template-columns: 1fr 2.5fr;
grid-template-areas: "a b" "c c";
}
.left {
min-height: 250px;
max-height: 303px;
grid-area: a;
background-color: aqua;
}
.right {
min-height: 250px;
max-height: 303px;
grid-area: b;
background-color: lightgreen;
}
.bottom {
grid-area: c;
background-color: orangered;
}
body {
margin: 0;
}
<div class="myGrid">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
jsFiddle demo
A hack can be to set the max-height on either .left or .right, and overflow as hidden like:
.myGrid {
display: grid;
max-height: 350px;
max-width: 700px;
grid-template-rows: minmax(250px, max-content) 47px;
grid-template-columns: 33% 67%;
grid-template-areas: "a b" "c c";
}
.left {
max-height: 303px;
overflow: hidden;
grid-area: a;
}
.right {
grid-area: b;
}
.bottom {
grid-area: c;
}

Trying to get equal columns with fractionally spaced gaps with Grid or Flexbox

I'm wondering if I'm approaching this from the wrong angle.
I'm trying to get items to be equally spaced, with a fixed (5/) number per line. There should be no left or right margins on leading or last columns. And the gutter or gap should be flexible/responsive.
html
<ul>
<li><span>01</span></li>
<li><span>02</span></li>
<li><span>03</span></li>
<li><span>04</span></li>
<li><span>05</span></li>
<li><span>06</span></li>
<li><span>07</span></li>
<li><span>08</span></li>
<li><span>09</span></li>
<li><span>10</span></li>
<li><span>05</span></li>
<li><span>06</span></li>
<li><span>07</span></li>
<li><span>08</span></li>
<li><span>09</span></li>
</ul>
css
ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1fr;
}
li {
line-height: 3em;
text-align:center;
 }
li:nth-child(5n+1) {
text-align:left;
}
li:nth-child(5n) {
text-align:right;
}
span {
border: 1px solid fuchsia;
border-radius: 50%;
padding: 0.5em;
}
/* Resets & Styling */
ul {
background-color: lightblue;
list-style: none;
margin: 0;
padding: 0;
}
I've also created a Codepen
How does this look?
https://codepen.io/panchroma/pen/LBMjoe
Update: have added vendor prefix for IE11 support
The important bits are that I changed your grid
ul {
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 1fr auto 1fr auto;
grid-template-columns: auto 1fr auto 1fr auto;
}
and I set the alignment of all the list items to center
li {
line-height: 3em;
text-align:center;
 }
As a small detail, I also added body to the resets at the end of the reset block.
Hope this helps!