Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases?
This transition:
+---------+--+---------+--+---------+
| div | | div | | div |
+---------+--+---------+--+---------+
to this:
+-----+
| div |
+-----+
| |
+-----+
| div |
+-----+
| |
+-----+
| div |
+-----+
should occur without passing through this interim stage:
+---------+--+---------+
| div | | div |
+---------+--+---------+
| | | |
+---------+--+---------+
| div | | |
+---------+--+---------+
Starting with the following code snippet:
.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>