J'ai une grille à l'intérieur d'une boîte à outils avec flex-flow fixé à column nowrap . La grille n'a pas un nombre fixe de colonnes grid-template-columns: repeat(auto-fill, 270px) .
Mon problème est que lorsque j'essaie de centrer cette grille dans la boîte à outils, elle ne prend pas autant d'espace que possible et réduit simplement le nombre de colonnes à 1.
Je veux que la grille ait 4 colonnes sauf si elle est sur le point de déborder du conteneur. Comment y parvenir ? J'ai essayé de définir margin: 0 auto; sur la grille, mais le résultat est le même.
Résultat actuel : 
Résultat souhaité + les colonnes doivent s'enrouler au lieu de déborder : 
HTML/CSS
J'ai mis min-width: 300px pour la grille car elle contient des images d'une largeur de 270px + 10px écart. Et j'ai mis en place max-width: calc(4 * 280px) car je ne veux pas avoir plus de 4 colonnes.
.portfolio {
min-height: 1004px;
display: flex;
flex-flow: column nowrap;
justify-items: center;
align-items: center;
}
.portfolio-heading {
margin: 50px 0px 0px 0px;
font-family: Lato;
font-size: 30px;
font-weight: 900;
color: #616161;
line-height: 2;
text-align: center;
}
.portfolio-text {
margin: 5px 0px 0px 0px;
font-family: "Lato";
font-size: 20px;
font-weight: 300;
color: #616161;
text-align: center;
}
.portfolio-nav-row {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 60px 0px 15px 0px;
padding-right: 10px;
}
.portfolio-nav-row-btn {
padding: 10px 19px;
margin-left: 10px;
border: 1px solid #ff6760;
border-radius: 5px;
background-color: #ff6760;
color: #ffffff;
font-family: "Lato";
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
.portfolio-grid {
max-width: calc(4 * 280px);
min-width: 300px;
display: grid;
grid-template-columns: repeat(auto-fill, 270px);
grid-gap: 10px;
justify-items: center;
overflow: hidden;
}
<section class="portfolio">
<h1 class="portfolio-heading">Our Featured Works</h1>
<p class="portfolio-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
<div class="portfolio-nav-row">
<button class="portfolio-nav-row-btn all-btn" type="button">All</button>
<button class="portfolio-nav-row-btn graphic-btn" type="button">Graphic</button>
<button class="portfolio-nav-row-btn illustration-btn" type="button">Illustration</button>
<button class="portfolio-nav-row-btn motion-btn" type="button">Motion</button>
</div>
<div class="portfolio-grid">
<img class="portfolio-grid-item portfolio-grid-row1-column1" src="pictures/portfolio-1.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row1-column2" src="pictures/portfolio-2.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row1-column3" src="pictures/portfolio-3.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row1-column4" src="pictures/portfolio-4.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row2-column1" src="pictures/portfolio-5.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row2-column2" src="pictures/portfolio-6.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row2-column3" src="pictures/portfolio-7.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row2-column4" src="pictures/portfolio-8.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row3-column1" src="pictures/portfolio-9.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row3-column2" src="pictures/portfolio-10.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row3-column3" src="pictures/portfolio-11.png" alt="portfolio image">
<img class="portfolio-grid-item portfolio-grid-row3-column4" src="pictures/portfolio-12.png" alt="portfolio image">
</div>
</section>
