Css grid rows with even items

Question

I have a row with 6 items. Depending on the width it will break the items into new rows.

The problem is that this can happend (asterix is an item):

*****
*

When I resize the screen I want it to adapt like below:

******

***
***

**
**
**

*
*
*
*
*
*

I know I can use media queries for this but I hope there is some other solution. Is there?

main {
  background: #eee;
  max-width: 600px;
}
section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, auto));
  grid-gap: 1rem;
}

div {
  background: #ddd;
}

<main>
  <section>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </section>
</main>

You can use bootstrap grid to do that or write own styles for each of resolutions (desktop / mobile). Check this links: https://getbootstrap.com/docs/4.4/layout/overview/ and https://getbootstrap.com/docs/4.4/layout/grid/ — yanca, Mar 06 '20 at 12:40
duplicate of: https://stackoverflow.com/q/60400211/8620333 but I cannot close because there is no answer and there will be no answer because it's not possible — Temani Afif, Mar 06 '20 at 12:44
Possible with the help of bootstrap grid as it has classes like `md sm xs` for above desire case — Awais, Mar 06 '20 at 12:45
@TemaniAfif The answer that it's not possible is also a valid answer to the question. — Jens Törnell, Mar 06 '20 at 13:03
From the browsers perspective, your desired breakdown (6 - 3 - 2 -1), is arbitrary. It has no reason to conform to your preference. It can just as easily breakdown in another manner (6 - 4 - 2 -1). If you're asking for a wrapping behavior that isn't the natural behavior, you need to provide an artificial force to make that happen. It could be media queries, a script or something else. — Michael Benjamin, Mar 06 '20 at 17:07

maersux · Accepted Answer · 2020-03-06T14:19:04.843

You have to work with media queries. I don't think there's anything else that would make sense.

main {
  background: #eee;
  max-width: 600px;
}

section {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, auto));
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 1rem;
}

@media only screen and (max-width: 800px) {
  section {
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows: repeat(2, 1fr)
   }
}

@media only screen and (max-width: 600px) {
  section {
    grid-template-columns: repeat(2, minmax(100px, auto));
    grid-template-rows: repeat(3, 1fr)
   }
}

@media only screen and (max-width: 400px) {
  section {
    grid-template-columns: repeat(1, minmax(100px, auto));
    grid-template-rows: repeat(6, 1fr)
   }
}

div {
  background: #ddd;
}

<main>
  <section>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </section>
</main>

score -3 · Answer 2 · answered Mar 06 '20 at 13:14

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    

</head>
<body>
    <div class="row">
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-dark" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-danger" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-light" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-primary" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-info" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-primary" name="">
        </div>
    </div>

</body>
</html>

Try this

Css grid rows with even items

2 Answers2