I've been exploring the website and attempting to implement a similar layout, but I'm facing some challenges in getting it to look how I want. Please refer to the image I've attached for reference. Is there a straightforward CSS-Grid method to achieve this? https://i.sstatic.net/jDBcZ.png
Here is the CSS code snippet I have been working on:
.main-container {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}
.box {
height: min-content;
}
/* Selecting the 2nd content block in column 3 */
.box.d {
grid-column: 3/6;
}
And here is the HTML structure I have implemented so far:
<div class="main-container">
<div class="box a">Content Here</div>
<div class="box b">Content Here</div>
<div class="box c">Content Here</div>
<div class="box d">Content Here</div>
<div class="box e">Content Here</div>
<div class="box f">Content Here</div>
</div>