Use CSS grid to make multiple different-width columns wrap?

Question

I am testing CSS grid for my new responsive layout, but I am having a problem with wrapping.

I have a nav bar with a header that should be pushed to the left and 4 buttons that should be pushed to the right. The problem right now is that using:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

Makes, as expected 5 evenly spaced and responsive grid cells. The problem is that I want the button cells to be significantly smaller than the header. So instead of it being 1fr 1fr 1fr 1fr 1fr, I want 8fr 1fr 1fr 1fr. How can I do this while still keeping the wrapping/responsive properties of using repeat autofit?

Codepen example illustrating the problem: https://codepen.io/johnpyp/pen/ZJxdYK

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid>* {
  align-text: center;
  background-color: lightgreen;
  height: 200px;
}

<div class="grid">
  <div>I want this to be 8fr, but it is 1fr like the rest.</div>
  <div>1fr</div>
  <div>1fr</div>
  <div>1fr</div>
</div>

Michael Benjamin · Accepted Answer · 2017-08-21 14:37:33Z

14

You can tell the first grid item to span 8 columns:

.grid > div:first-child {
  grid-column: span 8;
}

https://codepen.io/anon/pen/JyLQRB?editors=1100

answered Aug 21, 2017 at 14:37

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

johnpyp Over a year ago

I'm confused now because that solution works with when minmax is set to 100px, 100px won't work responsively because it can't shrink down to 320px like on an iPhone, it is minimum 800px. To get around this, I tried to set minmax to 40px (320 / 8, so it could at least fit 8 columns on the screen at once) and the wrapping failed to work! Can you explain why this is happening? And maybe a solution? Example: codepen.io/johnpyp/pen/ZJxdYK

johnpyp Over a year ago

Interestingly, it doesn't if you specifically shrink the browser window, but after hosting the code on my website I can confirm it does work correctly on mobile! Thanks a lot.

johnpyp Over a year ago

Also, is it possible to set individual min widths for each of the elements?

Michael Benjamin Over a year ago

I guess you can try sizing individual items by targeting them individually, the way I did for the first item.

Nobal Mohan · Accepted Answer · 2017-08-21 14:50:03Z

2

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 8fr 1fr 1fr 1fr;
}

https://css-tricks.com/snippets/css/complete-guide-grid/#fr-unit

answered Aug 21, 2017 at 14:50

Nobal Mohan

4867 silver badges21 bronze badges

1 Comment

johnpyp Over a year ago

This doesn't work because the content doesn't wrap when it hits a minimum width.

Collectives™ on Stack Overflow

Use CSS grid to make multiple different-width columns wrap?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related