Looking to create a page with multiple entries that include text descriptions and associated icons of varying sizes, aligned neatly. (For simplicity, using letters "i" and "w" as placeholders for icons.)
For wider screens, the setup should feature a grid layout with a spacious left column and icons to the right, occupying minimal horizontal space. Check out this example with two "icons."
.container {
display: grid;
grid-template-columns: 1fr repeat(2, max-content);
}
.content {
justify-self: center;
}<div class="container">
<div class="header">Some text</div>
<div class="content">i</div>
<div class="content">i</div>
<div class="header">Some more text</div>
<div class="content">w</div>
<div class="content">w</div>
</div>For smaller viewports, where the left column might shrink below 200px, the layout should responsively switch to a stacked display, like in this example.
.container {
display: grid;
grid-template-columns: 1fr repeat(2, max-content) 1fr;
}
.container > div {
justify-self: center;
}
.header {
grid-column-start: 1;
grid-column-end: 5;
}
.content1 {
grid-column-start: 2;
}
.content2 {
grid-column-start: 3;
}<div class="container">
<div class="header">Some text</div>
<div class="content1">i</div>
<div class="content2">i</div>
<div class="header">Some more text</div>
<div class="content1">w</div>
<div class="content2">w</div>
</div>While this method is effective, there are areas I'm looking to enhance:
- Considering my site relies on Bootstrap, utilizing their "row" and "col" features feels more appropriate than designing a grid from scratch. However, I struggle to implement this with Bootstrap, as discussed in this query.
- The current setup necessitates a media query and employs two distinct layouts based on screen space, which seems overly complex. Is there a way to optimize grid responsiveness, allowing icons to flow beneath text automatically when the viewport shrinks? Exploring options like auto-fill could help, although adapting columns of differing sizes presents a challenge.
- In the layout for smaller screens, the use of classes like
content1,content2, leads to repetitive CSS rules for column placement. This issue would escalate with more icons; seeking a solution that minimizes redundancy is essential.