Greetings everyone! I wanted to share a snapshot of my current layout:
https://i.sstatic.net/Cl8x6.png
My grid consists of 3 rows and 3 columns, where each column is set to min-content, and the elements are centered within each cell. While it looks alright, I noticed that when the title expands significantly, the gap between the switch and categories becomes too large:
https://i.sstatic.net/0Fr1D.png
I attempted solving this by enclosing the middle row in a div container and using flex, but encountered alignment issues due to varying category sizes.
Even adjusting the category sizes resulted in misalignment when centering the entire component on the page, as the smaller category introduced unwanted white space pushing the component too far to the right.
Any suggestions on reducing this excess space while maintaining the switch perfectly centered between the title and button?
Below is the provided code:
The HTML:
<div class="category-switch">
<div class="form-check category-switch__btn">
<input class="form-check-input" type="checkbox" />
<label class="form-check-label form-label">Disable</label>
</div>
<div class="category-switch__switch">
<div class="switch">
<div class="form-check">
<input class="form-check-input" type="checkbox" />
<label class="form-check-label form-label"></label>
</div>
<span class="switch__slider switch__round"></span>
</div>
</div>
<span class="category-switch__category category-switch__category--1">Male</span>
<span class="category-switch__category category-switch__category--2">Female</span>
<span class="category-switch__title">gender</span>
</div>
And the SCSS code:
.category-switch {
// Grid setup for item placement
display: grid;
grid-template-columns: repeat(3, min-content);
grid-template-rows: repeat(3, min-content);
gap: 0.8rem;
place-items: center;
justify-items: center;
// Component width based on content
width: max-content;
// Title styling
&__title {
grid-row: 1/2;
grid-column: 2/3;
font-weight: bold;
text-transform: capitalize;
}
// Category text positioning
&__category {
&--1 {
grid-row: 2/3;
grid-column: 1/2;
}
&--2 {
grid-row: 2/3;
grid-column: 3/4;
}
}
// Switch position setting
&__switch {
grid-row: 2/3;
grid-column: 2/3;
}
// Button CSS
&__btn {
grid-row: 3/4;
grid-column: 2/3;
display: grid;
place-items: center;
position: relative;
width: 7rem;
height: 2.8rem;
background: #d02b2b;
border-radius: 0.5rem;
}
}
I aimed for minimal code and omitted any non-positioning related SCSS details.