How to make divs occupy the entire space of a parent div?

Question

How to make divs occupy the entire space of a parent div?

I've been scouring the website for a solution, but nothing I've found has been helpful. I'm attempting to create a grid within a containing div where a default (and eventually user-specified) number of divs will fill up the space. I'm trying to determine how to adjust the size of the divs I add to the parent based on the quantity added, always ensuring the div is filled, if that makes sense. For example, if I input 9, I would like to see 3 rows and 3 columns. If I input 62, I am aiming for 16 rows and 16 columns, while still filling up (or getting close to) the containing div. I have a JSfiddle setup here: https://jsfiddle.net/psyonix/1g9p59bx/1/ This is the current code:

    var d = ("<div class='square'></div>");

function createGrid(numSquares){
    for(var i = 0; i < numSquares; i++){
            $('#g_area').append(d);
    }

    var squareSize = Math.floor(580/numSquares );
    $('.square').height(squareSize);
    $('.square').width(squareSize);
};


$(document).ready(function(){
    createGrid(64);

});

javascript jquery css

Answer 1

Answer №1

Your main issue was incorrectly setting the square size to 1/64th of the height instead of 1/(64^.5) of the height. This resulted in only one row being created. Explore the updated code snippet here: https://jsfiddle.net/1g9p59bx/7/

var d = ("<div class='square'></div>");

function createGrid(numSquares){
    var gridContainer = $('#g_area'); 
    for(var i = 0; i < numSquares; i++){
            gridContainer.append(d);
    }

    var squareSize = Math.floor(580/(Math.sqrt(numSquares)) );
    $('.square').height(squareSize);
    $('.square').width(squareSize);
};

$(document).ready(function(){
    createGrid(64);
});

Answer 2

Your main issue was incorrectly setting the square size to 1/64th of the height instead of 1/(64^.5) of the height. This resulted in only one row being created. Explore the updated code snippet here: https://jsfiddle.net/1g9p59bx/7/

var d = ("<div class='square'></div>");

function createGrid(numSquares){
    var gridContainer = $('#g_area'); 
    for(var i = 0; i < numSquares; i++){
            gridContainer.append(d);
    }

    var squareSize = Math.floor(580/(Math.sqrt(numSquares)) );
    $('.square').height(squareSize);
    $('.square').width(squareSize);
};

$(document).ready(function(){
    createGrid(64);
});

Answer 3

Answer №2

If I were to tackle this, I'd develop a jQuery plugin specifically for this purpose. This plugin can be invoked in any container of your choice by simply using:

containerForGrid.createGrid(cols, rows)

(function($){

$.fn.createGrid = function(cols, rows) {
  
  // obtain the width and height of the surrounding container
  var w = this.width()
  var h = this.height()
  
  // compute the width and height of each cell
  var colWidth = w / cols
  var rowHeight = h / rows
  
  // iterate over all rows
  for(var i = rows; --i;){
  
      // iterate over all columns
      for(var j = cols; --j;){
      
        $('<div>').css({
          width:colWidth,
          height:rowHeight,
          float:'left'
        }).appendTo(this)
      
      }
  
  }
  
}

})(jQuery)

jQuery('div').createGrid(10,10)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:1000px;height:500px">

</div>

Answer 4

If I were to tackle this, I'd develop a jQuery plugin specifically for this purpose. This plugin can be invoked in any container of your choice by simply using:

containerForGrid.createGrid(cols, rows)

(function($){

$.fn.createGrid = function(cols, rows) {
  
  // obtain the width and height of the surrounding container
  var w = this.width()
  var h = this.height()
  
  // compute the width and height of each cell
  var colWidth = w / cols
  var rowHeight = h / rows
  
  // iterate over all rows
  for(var i = rows; --i;){
  
      // iterate over all columns
      for(var j = cols; --j;){
      
        $('<div>').css({
          width:colWidth,
          height:rowHeight,
          float:'left'
        }).appendTo(this)
      
      }
  
  }
  
}

})(jQuery)

jQuery('div').createGrid(10,10)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:1000px;height:500px">

</div>

How to make divs occupy the entire space of a parent div?

Answer №1

Answer №2

Similar questions

Vertical button group within a Bootstrap 5 input group

Activate lighting in Three.js with a simple click

Using different browsers can cause web fonts to appear rough and pixelated

Determine in Typescript if a value is a string or not

Disappearance of jQuery Ui Spinner on Woocommerce cart page occurs after cart update

There appears to be a malfunction with WebRupee

Using jQuery to dynamically disable a textbox when a checkbox is checked

What is the process for converting this Greasemonkey code to JavaScript specifically for Android devices?

What is the reason behind the label value persistently showing up after the page is refreshed?

Using JQuery to make a GET request and receive a JSON response, then selecting particular objects

Effortless signing out using AJAX, Zend Framework, and jQuery

Struggling to float <aside> to the left of <article> for proper alignment?

Discover the best method for retrieving or accessing data from an array using Angular

Deleting an added element upon closing the dialog box

The paragraph tag closes automatically once opened

I'm looking for a way to set up a PropType that accepts a boolean value, but also allows for

Rotating through elements in timed intervals

Check if a rotated rectangle lies within the circular boundary of the canvas

Enhancing AngularJS view rendering using ngshow

Employing a "cross-domain" approach to serve as a login gateway for a different domain