How can I achieve a layout like this?
https://i.sstatic.net/rrISu.png
Essentially, I have 2 containers in flexbox:
- The first one with text "33"
- The second one is a grid container:
- The first element in the grid is "EUR"
- The second element in the grid is ".49"
Based on this description, I attempted to create an HTML structure using the following code:
<nav>
<div class="item">
<span class="date">Dom 07 Aug</span>
<div class="price-container">
<div class="first-price-container">
<span class="price-big"> 371 </span>
</div>
<div class="second-price-container">
<span class="currency">EUR</span>
<span class="price-small"> 74 </span>
</div>
</div>
</div>
</nav>I tried applying CSS to achieve this layout, but the outcome is not accurate. I want the "33" text to be of the same height as the grid layout:
https://i.sstatic.net/Bgt1H.png
Here is the CSS code used:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: border-box;
}
nav {
--small-font: 1rem;
font-family: poppins;
display: flex;
gap: 1rem;
}
.item {
display: grid;
}
.price-container {
display: flex;
}
.second-price-container {
display: grid;
font-size: var(--small-font);
}
.price-big {
font-size: calc(var(--small-font) * 2);
font-weight: bold;
}
.price-small::before {
content: ".";
}
.item .date {
color: blue;
}<nav>
<div class="item">
<span class="date">Dom 07 Aug</span>
<div class="price-container">
<div class="first-price-container">
<span class="price-big"> 37 </span>
</div>
<div class="second-price-container">
<span class="currency">EUR</span>
<span class="price-small"> 49 </span>
</div>
</div>
</div>
... <!-- additional repeated item blocks will follow -->
</nav>In the code, I assumed that if two elements have a font size of 1rem each, then combining them should result in the same height as the grid layout.
However, it appears that there is an incorrect gap between elements in the grid layout.
Another attempt was to increase the font size significantly, but the issue persisted. It seems that when the larger font size increases, so does the adjacent element on the right.
Please assist me, as this aspect is unclear to me. The problem arises only with font size and not height property.
Question:
Is there a formula for ensuring that font size equals height? This would allow for achieving pixel-perfect designs without excessive coding.
Now I will provide another example code illustrating how I want it to appear
It is much simpler to manage height using grid and flex properties.
The goal is to replicate the image shown, but with fonts instead.
https://i.sstatic.net/SWKKT.png
As seen, the height matches the other two elements on the right perfectly.
Sample code (for demonstration purposes):
nav {
display: flex;
}
.item {
/* square */
height: 10rem;
width: 10rem;
display: flex;
}
.item>* {
flex: 1;
}
.another {
display: grid;
}<nav>
<div class="item">
<div class="big" style="background-color: red;"></div>
<div class="another">
<div class="small" style="background-color: yellow;"></div>
<div class="small" style="background-color: green;"></div>
</div>
</div>
</nav>