CSS grid: wrap three divs simultaneously

Question

With CSS grid, how can I style three divs to wrap at the same time when the screen gets smaller ?

That means to go from this:

+---------+--+---------+--+---------+
|   div   |  |   div   |  |   div   |
+---------+--+---------+--+---------+

to this:

+-----+
| div |
+-----+
|     |
+-----+
| div |
+-----+
|     |
+-----+
| div |
+-----+

without first going through this intermediary step:

+---------+--+---------+
|   div   |  |   div   |
+---------+--+---------+
|         |  |         |
+---------+--+---------+
|   div   |  |         |
+---------+--+---------+

With that starter code:

.wrapper {
  display: grid;
  grid-gap: 10px;
}

<div class="wrapper">
  <div class="box">box 1</div>
  <div class="box">box 2</div>
  <div class="box">box 3</div>
</div>

https://jsfiddle.net/jLz0aqmj/1/

@Gabby_987 for cleanliness of grid-gap compared to negative margins with flexbox or other methods — Nicolas Marshall, Mar 03 '18 at 16:29

score 1 · Accepted Answer · answered Mar 03 '18 at 12:40

Use a media query to switch the number of columns from three to one.

revised jsFiddle demo

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

@media ( max-width: 500px ) {
  .wrapper {
    grid-template-columns: 1fr;
  }
}

.box {
  background-color: lightgreen;
}

<div class="wrapper">
  <div class="box">box 1</div>
  <div class="box">box 2</div>
  <div class="box">box 3</div>
</div>

score 0 · Answer 2 · answered Mar 03 '18 at 09:31

Hello Check below fiddle

https://jsfiddle.net/jLz0aqmj/8/

    <div class="wrapper">
  <div class="box">box 1</div>
  <div class="box">box 2</div>
  <div class="box">box 3</div>
</div>

and css

.wrapper{max-width:600px; font-size:0;}
.box{display:inline-block; max-width:200px; width:33%; font-size:13px; background:#ccc;}
@media screen and (max-width: 600px) {.box{display:block; max-width:100%}}

CSS grid: wrap three divs simultaneously

2 Answers2