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?

htmlcssflexbox

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for effectively managing JSON data in my application

I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...

htmljson

Grid layout with card tiles similar to Google Plus

I'm looking to develop a scrolling grid with card tiles similar to Google Plus that has three columns. I am currently using Material UI, but I can't seem to find the right functionality for this. I have experimented with the standard Material UI ...

javascriptcssmaterial-designmaterial-uicss-grid

Targeting HTML tags, styling names, and class names using CSS

In the markup below, I am trying to target three specific points using CSS. img style*=right class=media-element I attempted to use the code below, which did not work: img[style*="right"][class="media-element"] {margin-left:10px;} However, selecting t ...

htmlcsscss-selectors

Injecting arbitrary text following ?= in a web URL

Consider the following code snippet for a page named MyWebsite.com/page.php <?php $username = "SuperUsername"; $password = "SuperPassword"; if (isset($_GET['p']) && $_GET['p'] == "login") { if ($_POST['user&ap ...

javascriptphphtml

Show the cost on the HTML page according to the chosen currency option

I am currently dealing with two primary currencies in my business. The product page is created using HTML. There are 4 products on a single page, and I wish to display two prices for each product based on the selected currency (USD or EUR) without having t ...

html

Tips for effectively passing a parameter in @url.Action

I stumbled upon this piece of code: <button type="button" class="btn btn-inverse btn-danger" onclick="@("window.location.href='" + @Url.Action("ActionName", "ControllerName") +"'");"> Link </button> for redirecting- it works gre ...

jqueryhtmlasp.net-mvcrazor

Tips for deleting HTML tags from a database

Whenever I add something to my database, it also includes the html tags. Is there a way to prevent this from happening? public function retrieveDataFromDatabase() { $query = "SELECT * FROM gb ORDER BY id DESC LIMIT 0, 4"; //data output if ...

phphtmldatabase

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Extracting data from a table on the designated URL using Apify and Puppeteer is my current goal: https://en.wikipedia.org/wiki/List_of_hedge_funds The desired outcome should be an array of objects. Each element in the array must represent a <tr> ro ...

javascripthtmlweb-scrapingpuppeteerapify

Attempting to apply custom styles to jQuery components using CSS

Looking to restyle the black bar on my test page located at The black bar with 3 tabs about halfway down the page needs a new color scheme. By inspecting with FireBug, I found these elements: <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ...

jquerycss

Generate fresh input fields with distinct identifiers using JavaScript

My challenge is to dynamically create new empty text boxes in JavaScript, each with a unique name, while retaining the text entered in the previous box. I struggled with this for a while and eventually resorted to using PHP, but this resulted in unnecessar ...

javascriptphpjqueryhtml

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

javascriptjqueryhtmlcssjson

Sidebar content alignment vertically

Struggling with aligning items in a sidebar, specifically regarding the fixed footer and the overflow of the main sidebar container. Trying to achieve a layout where the scrollable element stays within the designated space. Current setup includes: ...

htmlcsstwitter-bootstrapbootstrap-5

The image must be able to fit within the div container without distorting its proportions

Recently, I created a slider that functions flawlessly. However, I am struggling to make the image fit inside the div without distorting its proportions. I've tried various methods but haven't been able to achieve the desired result. Could you p ...

jquerycssslider

the display:block property totally ruins my aesthetic

I'm facing an issue with filtering a table using an input box within one of the elements. Whenever I type something in the input box, the table automatically filters its rows based on the input. The strange thing is that when I try to use display:bl ...

jqueryhtmlcss

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

javascriptcssvue.jsbootstrap-4

When you click on a main category, a list of its corresponding subcategories will

concept image My vision involves having users click on a category from the top menu to display all main cards (parent cards), and then further clicking on a parent card will unveil its corresponding child cards. I've even included an image to help v ...

javascripthtmljquerybootstrap-5

Assigning event to the body element

Is there a way to bind an event to the entire page, specifically the html or body tag? I am trying to achieve the following: document.addEventListener('mousemove', function() { alert('a'); }); I want an alert to be triggered whenever ...

javascripthtml

What is the method for executing a server-side script without it being transmitted to the browser in any way?

Although the title may be misleading, my goal is to have my website execute a php file on the server side using arguments extracted from the html code. For example: document.getElementById("example").value; I want to run this operation on the se ...

javascripthtml

Using weasyprint to convert a single HTML page into a PDF

I have encountered a challenge while attempting to convert an HTML page with a single table (containing images or text in the td elements) to a PDF using the Python module weasyprint. The issue I am facing is that weasyprint is inserting page breaks withi ...

pythoncssweasyprint

Enhance the appearance of the table footer by implementing pagination with Bootstrap Angular6 Datatable styling

I utilized the angular 6 datatable to paginate the data in a table format. https://www.npmjs.com/package/angular-6-datatable Everything is functioning properly, but I am struggling with styling the footer of mfBootstrapPaginator. The items appear stack ...

htmlcssangulartwitter-bootstrapdatatable