Struggling with CSS grid in my new responsive design, particularly regarding wrapping.
The issue is with a nav bar containing a header that needs to be aligned left and four buttons that should be aligned right. Currently, using:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
This creates 5 evenly spaced and responsive grid cells, which is fine. However, I want the button cells to be much smaller than the header. Instead of 1fr 1fr 1fr 1fr 1fr, I need 8fr 1fr 1fr 1fr. How can I achieve this while still maintaining the wrapping and responsive properties of auto-fit?
To better understand the issue, you can view the Codepen example here: 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>