CSS Grid wrap without repeat and auto-fill?

Question

I have 3 columns in my grid.

I want them to behave like this:

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

as shown in this codepen: https://codepen.io/chriscoyier/pen/xBmYJN

Except i want it to be only 3 columns per row and the last column to be 3fr (3x the size of the other 2 columns), i.e. "1fr 1fr 3fr". And i want the last column to automatically go to a new row when its minimum width is met.

When using the above example the columns automatically collapse to a new row when they dont fit. Is there a way to do this in my case? Without manually configuring grid-template-areas and adjusting them depending on @media screen width?

I assume the functionality comes from the auto-fill argument of repeat()...

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

.grid>div {
  background: #EDE7F6;
  padding: 1.5rem;
  border-radius: 1rem;
}

body {
  margin: 2rem;
  font: 12px system-ui;
}

<div class="grid">
  <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?</div>
  <div>Quibusdam, eos esse dolorum facere voluptatem eius, dolore quas totam aspernatur obcaecati harum? Nihil eligendi eos minus odit minima earum incidunt rem fugit reprehenderit, molestiae possimus eveniet itaque laudantium excepturi.</div>
  <div>Ducimus quibusdam inventore delectus doloribus dignissimos. Dignissimos quos officia minus exercitationem perspiciatis harum iusto molestiae deleniti quod sunt amet recusandae autem, neque doloremque ad alias eaque consequuntur nesciunt quis eius!</div>
  <div>Cumque aspernatur ex ipsum dolorum eius, tempore omnis minus sequi architecto totam sunt maxime nemo, ab repellendus. Aut voluptatem saepe voluptatibus nisi ipsum. Debitis corporis culpa ipsa error nemo doloribus.</div>
  <div>Consequatur dolore, architecto quos saepe consequuntur libero minus totam? Enim optio provident commodi corporis officiis, sunt maiores? Cupiditate consequuntur, cumque natus corporis velit sunt ad magni aliquid facere deleniti molestiae.</div>
  <div>Voluptatibus similique modi voluptatum voluptatem quo quod minima ducimus facere, sequi libero accusamus nisi nobis? Minima error tempore quo esse quod odit, deleniti labore nulla ullam velit nemo neque sint!</div>
  <div>Qui, corporis delectus? Pariatur vel autem commodi, accusantium, voluptate obcaecati iste, a debitis facilis repellendus mollitia. Dolore dicta totam, quaerat omnis accusantium magni alias voluptates eligendi ex id aut dolorem?</div>
  <div>Recusandae tempora ab error omnis exercitationem illo accusamus esse sit ipsa accusantium iure, possimus ducimus quis consequuntur qui corporis nobis culpa repudiandae! Suscipit, debitis. Omnis delectus at vitae laborum quos?</div>
  <div>Dolorem saepe accusamus sed placeat porro ex, ab, vel eaque libero incidunt facilis delectus, iure odio dicta error consequuntur perspiciatis quasi? Corrupti incidunt quia asperiores quo magnam at minima laudantium?</div>
  <div>Dolor ad saepe, nemo fugit tempora autem est fugiat quis porro atque nam repellendus maxime neque voluptatem rerum amet odit aspernatur voluptates iusto eos laboriosam enim vel. Eius, debitis beatae!</div>
</div>

Invoice

Basically no.. There is not. – Morril

Would you do this with media queries? :/ – Invoice

i guess i can just do it flex and wrap.. just wanted to try and use grid ^^ – Invoice

here is an idea but failing while leaving a empty gap (if no mediaquerie + max-width set) codepen.io/gc-nomade/pen/JjbJgNo , if anyone else can use it ;) not too sure about the size of the third column once wrapped ? spanning the other 2 ? – Popliteal

Answer 1

This is indeed possible. The trick is to assign your third column to span 3 columns while leaving the grid-template-column to auto-fill or auto-fit.

Also, by using auto-fit the columns will adjust a bit nicer as they fit available space.

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

div.col3 {
  grid-column: span 3;
}

<div class="container">
  <div class="col1">First</div>
  <div class="col2">Second</div>
  <div class="col3">Third</div>
</div>

Codepen

Clemmer

This answers the question if there is only 3 divs - however, I think OPs question is looking for an automatic solution without using a class (if you look at the codepen and snippet examples provided) for the third child. Essentially it would be 1fr 1fr 3fr for every row and then when it collapses 1.5fr 1.5fr with the 3fr falling below onto a separate row. – Zebu