Ways to evenly distribute divs into rows

Question

Ways to evenly distribute divs into rows

Greetings if this question has already been inquired about, but my search turned up nothing quite like it.

My current setup is as follows:

.main{
    display: inline-flex;
    flex-direction: row;
}

<div class = "main">
    <div class="sub-div">1 </div>
    <div class="sub-div">2 </div>
    <div class="sub-div">3 </div>
    <div class="sub-div">4 </div>
    <div class="sub-div">5 </div>
    <div class="sub-div">6 </div>
</div>

The current result shows all the divs in a single line. Is there a way to arrange them so that 3 divs are on the top row and 3 divs on the bottom row?

In addition, if the screen size decreases, how can I organize the divs to have 2 on the top row, 2 in the middle row, and 2 on the last row?

Is there a method to achieve this without modifying the HTML structure or utilizing Javascript?

html css flexbox

Answer 1

Answer №1

To enable children of .main to wrap onto multiple lines, utilize the CSS property flex-wrap: wrap. By setting the width explicitly to calc(100% / n), where n represents the desired number of children per row, you can achieve the desired layout.

If you wish to modify the layout from 2 divs per row to 3 divs per row, utilize a media query as demonstrated in the code snippet below.

.main {
  display: inline-flex;
  flex-wrap: wrap;
}

.sub-div {
  width: calc(100% / 2);
}

@media screen and (min-width: 600px) {
  .sub-div {
    width: calc(100% / 3);
  }
}

<div class="main">
  <div class="sub-div">1 </div>
  <div class="sub-div">2 </div>
  <div class="sub-div">3 </div>
  <div class="sub-div">4 </div>
  <div class="sub-div">5 </div>
  <div class="sub-div">6 </div>
</div>

Answer 2

To enable children of .main to wrap onto multiple lines, utilize the CSS property flex-wrap: wrap. By setting the width explicitly to calc(100% / n), where n represents the desired number of children per row, you can achieve the desired layout.

If you wish to modify the layout from 2 divs per row to 3 divs per row, utilize a media query as demonstrated in the code snippet below.

.main {
  display: inline-flex;
  flex-wrap: wrap;
}

.sub-div {
  width: calc(100% / 2);
}

@media screen and (min-width: 600px) {
  .sub-div {
    width: calc(100% / 3);
  }
}

<div class="main">
  <div class="sub-div">1 </div>
  <div class="sub-div">2 </div>
  <div class="sub-div">3 </div>
  <div class="sub-div">4 </div>
  <div class="sub-div">5 </div>
  <div class="sub-div">6 </div>
</div>

Answer 3

Answer №2

To accomplish this, utilize the power of Grid along with media queries.

.container {
  display: grid;
  /* grid-gap: 50px 100px; */
  grid-template-columns: auto auto auto;
}

@media only screen and (max-width: 768px) {
  .container {
    grid-template-columns: auto auto;
  }
}

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

Answer 4

To accomplish this, utilize the power of Grid along with media queries.

.container {
  display: grid;
  /* grid-gap: 50px 100px; */
  grid-template-columns: auto auto auto;
}

@media only screen and (max-width: 768px) {
  .container {
    grid-template-columns: auto auto;
  }
}

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

Ways to evenly distribute divs into rows

Answer №1

Answer №2

Similar questions

Using JQuery to reverse the action of hiding an image

What is the best way to adjust the fontSize of text within a table using Material UI?

Having Troubles with PHP File Upload Form

Troubleshoot: Difficulty selecting elements in OnsenUI with jQuery or JavaScript - potential ons-template problem?

Steps for Loading HTML5 Video Element in Ionic 2

Execute AJAX function when loading a form populated from a MySQL/PHP database

Guide to implementing a slider in HTML to adjust the size of my canvas brush

I'm keen on creating a marquee animation using Tailwind and Next.js

In JavaScript, use the href property to redirect to an external URL and then automatically scroll to a specific class on the page

Animated CSS Checkmark Design

Effortless pagination across various pages, utilizing diverse CSS selectors

jQuery document.ready not triggering on second screen on Android device

How can I assign a class to my Typography component in Material UI?

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Applying personalized CSS to an element based on the condition of a child element in the previous sibling element

Creating a simulated dropdown menu using only CSS

Designing a photo frame slider for a unique touch

I rely on the angular-responsive-carousel library for my project, but unfortunately, I am unable to customize the arrow and dots

As you scroll, this smooth marquee effect gently shimmers with each movement

How can I make the background of a button change when I move my cursor over it