How to add a fluid container with equally spaced DIVs with CSS?

Spread the love

Sometimes, we want to add a fluid container with equally spaced DIVs with CSS.

In this article, we’ll look at how to add a fluid container with equally spaced DIVs with CSS.

How to add a fluid container with equally spaced DIVs with CSS?

To add a fluid container with equally spaced DIVs with CSS, we use flexbox.

For instance, we write

<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

to add nested divs.

Then we write

#container {
  display: flex;
  justify-content: space-between;
}

to make the outer div a flex container with display: flex;.

And we use justify-content: space-between; to spread the inner divs throughout the container’s width.

Conclusion

To add a fluid container with equally spaced DIVs with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *