Question 282530 in CSS Question posted in
Some basic documentation can be found here.

Css – How do I limit the number of divs in a flex container

I have a div set to flex and row wrap. Inside I have a collection of divs each containing a picture. As the width of the viewport increases, they re-arrange themselves correctly, but I would like to limit the number of pictures per row. I can get this done by changing the width of the pictures but that gets tiresome. Is there a simpler way, something like a "max-boxes-per-row" concept? Below is the relevant CSS

#gallery-box {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.box {
  display: inline-block;
  width: 80vw;
  aspect-ratio: 1/1;

  text-align: center;
  font-size: 22px;
  padding-top: 16px;
  font-family: "Quicksand", sans-serif;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
Tags:

2

Answers


  1. 0 
    
#gallery-box {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.box {
  display: inline-block;
  width: calc(100% / 3); /* Adjust the 3 in calc(100% / 3) to your preferred maximum number of pictures per row. */
  aspect-ratio: 1/1;

  text-align: center;
  font-size: 22px;
  padding-top: 16px;
  font-family: "Quicksand", sans-serif;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
    Login or Signup to reply.
  2. 0

    You may want to use display:grid so you can specify how many span in 1 row. You can learn more about this grid-column

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search