Align items to left while using flex wrap

@codyhillSep 29.2021

Hi guys,
Is it possible to align all the cards to the left if I am using flex-wrap? Now, then the cards are not even the last cards are centered to the center.
Here is an example: https://codepen.io/raul-rogojan/pen/KKqbJJg?editors=1100

to post a comment

CSS

@SempervivumSep 29.2021 — #This is difficult when using flex but easy when using grid.

@codyhillauthorSep 29.2021 — #@Sempervivum#1637683 How could I achieve this using grid?

@SempervivumSep 29.2021 — #Try this CSS for .card-container:

``<i>
 </i>        .card-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 grid-gap: 5px;
 }<i>
 </i>``

@codyhillauthorSep 29.2021 — #@Sempervivum#1637687 This works, only the gap between the columns gets too big at times.

@SempervivumSep 30.2021 — #I tested it by this demo page and the gap remains constant:

``<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Image Stack&lt;/title&gt;
 
 &lt;style&gt;
 .container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 grid-gap: 5px;
 }
 
 .cell {
 border: 2px solid lightblue;
 height: 100px;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div class="container"&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;<i>
 </i>``

@juangg45Oct 02.2021 — #Squarefoot Flooring has been a retail leader in the distribution of Flooring products for 10 Years. We currently provide services in Mississauga, Toronto, Brampton, Oakville, Markham, Richmond Hill. Stoney Creek, Niagara Falls. Hamilton, Ancaster, Burlington, Kitchener, Guelph, Sudbury, Pickering, Ajax, Whitby, Oshawa. We excel in providing a quality product in order to make your dream place a reality and have won the title for “Mississauga’s 2019 favorite business. With over 9000+ options for flooring we bring you the largest variety of styles, materials and colors to select only the best [tile shop mississauga

](https://squarefootflooring.com/tile-shop-mississauga/)

Align items to left while using flex wrap

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Align items to left while using flex wrap

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴