Achieve equal distribution of divs with a specified size

Question

Achieve equal distribution of divs with a specified size

After searching through various questions, none of the answers provided a solution that worked for my specific situation.

Within my project, I have a series of divs, each with a fixed width of 210px.

The container holding these divs is able to resize based on the user's screen size. It is crucial that the divs maintain even spacing horizontally and wrap onto a new line if necessary.

For a visual representation, please see the diagram linked below: https://i.sstatic.net/KUJrJ.jpg

While this JS fiddle demonstrates the desired outcome, I am unsure how to adapt it for divs with fixed widths.

width: calc(100% / 6);

EDIT:

The issue with the JS Fiddle arises when the screen size has space, but not enough to accommodate another div. At this point, the last div should align closer to the right side.

https://i.sstatic.net/lN5Z4.jpg

html css

Answer 1

Answer №1

Flexbox is the solution you need by simply adjusting the justify-content to space-around (or space-between if necessary for your design). Take a look at this example:

body{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  margin:0;
  padding:5px;
}
div{
  background:#000;
  flex:0 0 210px;
  height:210px;
  margin:5px;
  width:210px;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Visit caniuse.com for more information on browser support and prefixing.

Answer 2

Flexbox is the solution you need by simply adjusting the justify-content to space-around (or space-between if necessary for your design). Take a look at this example:

body{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  margin:0;
  padding:5px;
}
div{
  background:#000;
  flex:0 0 210px;
  height:210px;
  margin:5px;
  width:210px;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Visit caniuse.com for more information on browser support and prefixing.

Answer 3

Answer №2

Here is a helpful article that delves into achieving visual layouts without relying on Flexbox. Flexbox can be tricky to work with due to various bugs and inconsistent browser support, so it's good to explore alternative methods.

If you're facing challenges with Flexbox, you can try the following approach:

.container {
  padding: y%; /* Using percentage-based padding for the container creates a scalable layout as the screen width increases. */
}

.box {
  width: 210px; /* Setting a fixed width for the box. */
  margin-right: x%; /* Adjust this value to evenly distribute containers across the screen and allow wrapping when needed. Experiment with different values until it works for you. */
}

Give this method a try and see if it resolves your layout issue!

Answer 4

Here is a helpful article that delves into achieving visual layouts without relying on Flexbox. Flexbox can be tricky to work with due to various bugs and inconsistent browser support, so it's good to explore alternative methods.

If you're facing challenges with Flexbox, you can try the following approach:

.container {
  padding: y%; /* Using percentage-based padding for the container creates a scalable layout as the screen width increases. */
}

.box {
  width: 210px; /* Setting a fixed width for the box. */
  margin-right: x%; /* Adjust this value to evenly distribute containers across the screen and allow wrapping when needed. Experiment with different values until it works for you. */
}

Give this method a try and see if it resolves your layout issue!

Answer 5

Answer №3

Upon reviewing the screen shot and gathering input from various sources, it seems that flexbox can be a valuable tool (I was particularly interested in receiving feedback on my comments regarding http://jsfiddle.net/bvgn46hu/108/ & http://jsfiddle.net/bvgn46hu/114/ )

#container {
  margin:1em;
  color:turquoise;
  display:flex;
  flex-wrap:wrap;
  border: solid;
  padding:2vh;
  align-items:center;
  justify-content:space-between;
}
#container > div:before {
  content:'boxe ';
  padding-right:0.25em;;
}
#container > div {
  display:flex;
  
  align-items:center;
  justify-content:center;
  min-height:25vh;
  border: solid;
  margin:1vh 0;
  width:400px;
  min-width:calc(100vw  / 4);
  max-width: 45%;
  
}

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

check out the codepen here

Answer 6

Upon reviewing the screen shot and gathering input from various sources, it seems that flexbox can be a valuable tool (I was particularly interested in receiving feedback on my comments regarding http://jsfiddle.net/bvgn46hu/108/ & http://jsfiddle.net/bvgn46hu/114/ )

#container {
  margin:1em;
  color:turquoise;
  display:flex;
  flex-wrap:wrap;
  border: solid;
  padding:2vh;
  align-items:center;
  justify-content:space-between;
}
#container > div:before {
  content:'boxe ';
  padding-right:0.25em;;
}
#container > div {
  display:flex;
  
  align-items:center;
  justify-content:center;
  min-height:25vh;
  border: solid;
  margin:1vh 0;
  width:400px;
  min-width:calc(100vw  / 4);
  max-width: 45%;
  
}

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

check out the codepen here

Achieve equal distribution of divs with a specified size

Answer №1

Answer №2

Answer №3

Similar questions

Tips for excluding a CSS property from a class override

Safari causing misalignment in Bootstrap column layout

choose courses using jQuery

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

My HTML loop is functioning properly with a variable, however, it is not working as expected

Is there a way to align input fields alongside the center of their corresponding labels?

Alter the top property of CSS using JavaScript

Substitute the images with links provided in an external text file

bootstrap 4 - create a responsive two-column layout where the second column displays additional details specifically designed for mobile devices

Minimize the empty area separating two adjacent <sup> components

Menu navigation - ensuring the background color extends to cover the entire page, not just the viewport

Leverage scope variables and dynamic CSS properties when using ngClass

Using ngb-carousel to display embedded YouTube iframe videos

Attempting to achieve the desired grid layout with Bootstrap 4

Troublesome Appearance of Datatables in Bootstrap 4

Angular 2: Applying class to td element when clicked

Display the latest tooltip in a Tree view

display the table without providing a preview

Exploring the power of add() method in getStyleClass() along with some code snippets

How about using a circle inset clip path technique?