Optimally align child divs within container in row and column layouts

Looking for a way to dynamically adjust div sizes based on available space within the parent container to minimize white space. Hoping for a solution that can accommodate fluctuations in the number of divs over time.

The goal is to reduce white space as much as possible, even if it means using vertical scrolling. While I've experimented with a script that provided some progress, I believe there might be a more effective approach leveraging CSS grids auto-sizing capabilities:

if (size.width > size.height && divCount.length < 13) {
  columnSize = Math.round(12 / (divCount.length / 2));
}
if (size.width < size.height && divCount.length < 13) {
  columnSize = 6;
}
let colClass = 'col-6 col-sm-4 col-md-' + columnSize;

https://i.sstatic.net/iMP6L.png I have provided a starter file, but I apologize for the lack of code - I'm uncertain where to start: https://codepen.io/liamb/pen/KKVqvdz

cssvue.jsbootstrap-4css-grid

Answer №1

How about implementing a flex layout without using JavaScript? Here's a simple example using Tailwind CSS:

<div class="flex h-screen flex-wrap">
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 1
    </div>
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 2
    </div>
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 3
    </div>
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 4
    </div>
</div>

You can view the entire example in action here: https://jsfiddle.net/denisstukalov/vgzt2Lep/12/

Answer №2

Uncertain about the specific desired outcome you are aiming for, but here are a few suggestions.

  1. To achieve full width, consider using the .container-fluid class instead of .container.
  2. If you need a square-shaped col, I have provided an example using padding-top.

.container-fluid{
  background: yellow;
  width: 100vw;
  height:100vh;
}
.row{
  padding:15px;
  height: 100%;
}
.row > div {
  border: 1px solid #000;
  padding: 0;
}
.row > div::after {
  content: '';
  display: block;
  position: relative;
  z-index: 1;
  padding-top: 100%;
} 
.row > div .col-in {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col-3">
      <div class="col-in">
        Div 1
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 2
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 3
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 4
      </div>
    </div>
  </div>
</div>

Here is an example utilizing grid-template-columns, auto-fill, and auto-fit for dynamic resizing.

body {
  padding: 1em;
}

hr {
  margin: 50px;
}

.grid-container {
    display: grid;
    /*just to resize the example, optional*/
    resize: horizontal;
    overflow: hidden;
}

.grid-container-fill {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container-fit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-element {
  background-color: #000;
  padding: 20px;
  color: #fff;
  border: 1px solid #fff;
}
<h2>auto-fill</h2>
<div class="grid-container grid-container-fill">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

<hr>

<h2>auto-fit</h2>
<div class="grid-container grid-container-fit">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

If you're still seeking more solutions or information, feel free to let me know.

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

Exploring the option of integrating Vuetify snackbar as a universal custom component in Vue.js

I recently implemented a Snackbar to display success messages in Vue.js and now I want to create a global custom Snackbar component. <template> <div name="snackbars"> <v-snackbar v-model="snackbar" :colo ...

vue.jsvuetify.js

Incorporating Bootstrap Content: A Guide to Including a PHP File within Another PHP File

I am encountering an issue when trying to import a PHP file containing my navigation bar into another PHP file. Here's the code for the navigation file: <?php echo " <html> <head> <nav class = "navbar navbar-default navbar-fixed-top ...

phpjqueryhtmlcss

Using Vue.js to dynamically append a bound URL

Within my Vue template, I currently have the following code: <img class="workimg" v-bind:src="item.imagemobile"> I am considering appending it to: <img class="workimg" v-bind:src="/featured/item.imagemobile"> However, this syntax seems to b ...

templatesvue.jsvuejs2

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

phphtmlcssajaximagemap

I'm encountering an undefined JavaScript variable, how should I proceed?

$(function(){ //Location was "set". Perform actions. $("#geocodesubmit").click(function(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status ...

javascriptjqueryhtmlcssgoogle-maps

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

jqueryhtmlangularjscss

Creating a new Vue component instance when a prop is modified

Our single page application uses different views with components that update based on one-way data flow. Each child property is updated when the corresponding value in the parent changes. I'm wondering if it's possible to create a completely new ...

vue.jsvuejs2vue-component

Excessive grid image spills over surrounding elements

Here are the code snippets. Everything seems fine here, but in my browser, the last image overflows on the blue section and the text below it is not visible at all. This issue occurs with the third list item of the unordered list. /**************** Cust ...

htmlcss

synchronizing multiple .vue files

Recently, I started exploring vue.js. In my journey, I encountered a scenario where I have two distinct vue.js files. Let's look at the first file: <template> <SecondFile /> </template> <script> import SecondFile from Seco ...

vue.js

Angular, dividing a row between two components

Can components share the same row? Currently, the side navbar takes up 2 columns, but I want each card to take up exactly 3 columns. This is the current layout: https://i.sstatic.net/J0CRF.png Here is the expected layout: https://i.sstatic.net/GupPd.png ...

angularbootstrap-4

Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

I am encountering an issue while attempting to adjust the width and height of a rectangle using jQuery. The error message I receive is "Uncaught TypeError: Cannot read property 'scrollWidth' of null" Below you can find the code snippet in questi ...

javascriptjqueryhtmlcsssvg

How can I include a close/ok button at the bottom of a bootstrap multiselect component?

Currently, I am utilizing the Bootstrap multiselect tool to filter query outcomes on a specific page. After selecting one or multiple options, my goal is to have a "close" or "OK" button visible at the bottom of the selection list. Upon clicking this butto ...

jquerycsstwitter-bootstrap-3bootstrap-multiselect

Change the position of buttons inside a Bootstrap 4 modal to the left side

I am currently working with a modal in bootstrap 4 and I would like to reposition the 'cancel' and return buttons to the left side of the modal. I have set up a js fiddle for reference: https://jsfiddle.net/andrewsolis/08v6znox/. Below is my HTML ...

htmlcssbootstrap-modalbootstrap-4

What is the best way to add a scrollbar above a table?

My table is wide and doesn't fully fit on normal monitors. Is there a way to add a scroll bar above the table or the container div? Check out the scroll bar used in the users table of Discourse here. HTML <div id="table_div"> < ...

javascripthtmljquerycss

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

htmlcssangular

What steps do I need to follow in order to perform a particle design simulation on my laptop

Recently, I attempted to utilize some of the particle designs featured on this website https://speckyboy.com/particle-animation-code-snippets/, but encountered difficulties. I have included both the stylesheet and javascript files, yet the design does not ...

javascripthtmlcss

Problem with implementing d-flex in Bootstrap v5.0 navbar

I applied the d-flex and justify-content-between classes to the parent tags of the anchor and div elements, but for some reason it's not working as expected. Can anyone help me understand why? <nav class="navbar navbar-expand-lg navbar-light b ...

cssflexboxbootstrap-5

Accessing index.html via file:// from Vue-cli template

Whenever I execute the npm run build command using this Vue-cli template, it displays this message: Hint: The built files are designed to be served over an HTTP server. Attempting to open index.html via file:// will not function correctly. Therefore, the ...

javascriptnpmwebpackvue.js

Guide for implementing smooth fade in and out effect for toggling text with button click

I have this code snippet that toggles text on button click: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function toggleText(){ ...

javascripthtmljquerycss

The issue of Google fonts failing to load on Windows browsers while loading perfectly on Mac browsers has been observed

Stackers. I am currently the Front End developer for www.PinionLMS.com. Our website is using "Lato," a Google font. The issue we are experiencing is that when you access the site from a Windows (8.1) browser such as Chrome, Firefox, or Internet Explorer ...

csswindowsmacosgoogle-api