I'm trying to build a responsive grid layout using CSS Grid where I want to maintain control over the sizes of each column. I have a grid defined like the given below.
The issue I'm facing is making this grid responsive while keeping control over the column sizes.
I'm aware of the repeat() method with auto-fit or auto-fill, but when using it, I lose the ability to define specific sizes for individual columns (e.g., 1fr, 1.5fr, 0.5fr, etc.).
What I've tried:
- Using
repeat(auto-fit, minmax(...)): This approach works for making the columns responsive, but I lose control over the specific column sizes. - Setting fixed sizes like
grid-template-columns: 100px 200px ..., but this doesn't work well for responsiveness on smaller screens.
What I want to achieve:
I want to create a grid layout that:
- Is responsive.
- Allows me to maintain control over the sizes of individual columns.
How can I achieve this type of responsive grid layout without losing control over specific column sizes?
I want to use as less media queries as possible, Is there a way to use a combination of repeat() and explicit column sizes?
.row { display: grid; grid-template-columns: 1fr 1fr 1.5fr 0.5fr 0.5fr 0.5fr 1fr; gap: 16px;}.col-1 { text-align: center; background-color: lightgray; padding: 16px;}<div class="row"><div class="col-1">1</div><div class="col-1">2</div><div class="col-1">3</div><div class="col-1">4</div><div class="col-1">5</div><div class="col-1">6</div><div class="col-1">7</div></div>