Center flex layout without shrinking the column

Question

I have a grid inside of a flexbox with flex-flow set to column nowrap. The grid doesn't have a fixed number of columns grid-template-columns: repeat(auto-fill, 270px).

My problem is that when I'm trying to center that grid in the flexbox, it doesn't take up as much space as possible, and instead just reduces the number of columns to 1.

I want the grid to have 4 columns unless it's about to overflow from the container. How do I achieve that? I tried to set margin: 0 auto; on the grid, but it produces the same result.

Current result:

Desired result + the columns have to wrap instead of overflowing:

HTML/CSS
I've set min-width: 300px for the grid because it contains pictures with width of 270px + 10px gap. And I've set max-width: calc(4 * 280px) because I don't want to have more than 4 columns.

.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>

Answer 1

You have to use width: 100% on .portfolio-grid. It takes only one column because you don't give it any width. So it takes its width depending on it min-width value. I have check it on my CodePen and it's working fine with width: 100%.

.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, 300px);
  grid-gap: 10px;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

<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="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column2" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column3" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column4" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column1" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column2" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column3" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column4" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column1" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column2" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column3" src="http://placehold.it/270x270" alt="portfolio image">
    <img class="portfolio-grid-item portfolio-grid-row1-column4" src="http://placehold.it/270x270" alt="portfolio image">
  </div>
</section>