Creating a dynamic layout of 9 divs in a fluid 3x3 grid

Fiddle | FullScreen

UPDATE : New Fiddle | FullScreen View

The code snippet provided demonstrates the creation of a grid with dimensions of 3x3, consisting of 9 div elements (with 8 cloned using jQuery). The horizontal alignment of the grid has been achieved successfully, but vertical alignment is yet to be implemented. Any relatively simple CSS solutions for vertical centering would be greatly appreciated.

In addition, the use of !important in the CSS styling for defining min-height and min-width properties of div#game1 is currently necessary, although not ideal. Are there alternative methods that can be employed to address this issue?


LATEST UPDATE: Revised Code

jQuery

(function($) {
    var $game1 = $('div#game1');
    var $game2 = $('div#game2');

    for (var i = 0; i < 8; i++) {
        $game1.append($('div.frame').eq(0).clone());
    }

    var $frame = $game1.find('div.frame');

    $(window).on('resize', function() {
        var windowW = window.innerWidth, windowH = window.innerHeight;
        var gameLen = windowW < windowH ? windowW : windowH;
        $game1.css({
            'width':  gameLen + 'px',
            'height': gameLen + 'px'
        });
    });
    $(window).trigger('resize');

})(jQuery);

HTML

    <div id="game1">
    <!-- this is one frame. Its cloned and repeated 8 more times -->
    <div data-win="-" class="frame">
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div class="winsign"></div>
    </div>
</div>

CSS

html, body {
    width: 100%; height: 100%;
    min-width: 500px;
    min-height: 500px;
    margin: 0;
    font-family: 'Open sans', sans-serif;
}

body {
    background-image: -webkit-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:    -moz-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:     -ms-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:      -o-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:         radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
}

div {
    box-sizing: border-box;
}

#game1, #game2 {
    min-width: 500px;
    min-height: 500px;
    margin: auto;
}

.frame {
    float: left;
    position: relative;
    width: 32%; height: 32%;
    margin: 0.66%;
}

.frame > .winsign {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}

.frame .signbox {
    float:  left;
    width: 33.33%; height:  33.33%;
    border: 0px solid rgba(0, 0, 0, .5);
    overflow: hidden;
}

.frame:nth-child(1) { background: rgba(255, 0, 0, .3);   }
.frame:nth-child(2) { background: rgba(0, 255, 0, .3);   }
.frame:nth-child(3) { background: rgba(0, 0, 255, .3);   }
.frame:nth-child(4) { background: rgba(111, 111, 0, .3); }
.frame:nth-child(5) { background: rgba(0, 111, 255, .3); }
.frame:nth-child(6) { background: rgba(255, 0, 121, .3); }
.frame:nth-child(7) { background: rgba(77, 25, 255, .3); }
.frame:nth-child(8) { background: rgba(12, 12, 123, .3); }
.frame:nth-child(9) { background: rgba(255, 255, 5, .3); }

Answer №1

Class frame is experiencing a display:inline-block bug that can be resolved by switching to float: left.

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

streaming an HTML5 video directly from memory source

After retrieving multiple encrypted data using ajax queries and performing necessary manipulations to turn them into a valid video, I find myself at a standstill. The binary of the video is now stored in memory, but I am unsure how to display it. To confi ...

Having trouble with an Unexpected identifier error when using setTimeout and animate together?

Here is my code snippet: setTimeout(function() $('.golden').animate({ opacity: "1", top: "84px" }, 'slow'); }, 1000 ); Ah, it throws an Unexpected identifier error. However, when I simplify the code like this: ...

Bringing data from HTML into Matlab via a table

I need assistance with importing data from an HTML webpage into Matlab. I've tried using the "getTableFromWeb" function, but it doesn't seem to be working as expected. When I view the data in a browser like Firefox, everything appears fine. Howev ...

Remove every other element from a JSON Array by splicing out the even-numbered items, rather than removing matching items

After receiving a JSON Array Output from a REST API, I am using ng-repeat to display the items on an HTML page. The structure of the received data is as follows: var searchresponse = [{ "items": [{ "employeeId": "ABC", "type": "D", "alive": "Y ...

When implementing AJAX functionality, the includeSelectAllOption feature does not seem to function properly

The select all option is not working in the second drop-down, but it works for the first dropdown where I fetch dropdown options from a database. In my second dropdown, I hardcoded the dropdown options. <?php include_once("connection.php"); $query="sel ...

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

AngularJS - displaying a notification when the array length is empty and customizing the visibility to conceal the default action

I've been working on an Angular project where I display a loading circle that disappears once the content is loaded. This circle is simply a CSS class that I call from my HTML only when the page first loads, like this: Actually, the circle consists o ...

You can eliminate the display flex property from the MuiCollapse-wrapper

Having trouble removing the display flex property from the MuiCollapse-wrapper, I did some research and found the rule name for the wrapper in this link https://material-ui.com/api/collapse/ I have been unsuccessful in overwriting the class name wrapper t ...

Guide on generating a dynamic table by looping through an array and placing values inside <tr> tags, then saving it in a variable

I am working with an array object and need to dynamically create a table where each tablerow (tr) pulls values from the array object. After creating the table, I want to store it in a variable so that I can pass it to a rest call, triggering an email with ...

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

How do I set up a navigation bar item to align to either side based on the selected language?

I need to adjust the positioning of the last list item component within a specific div. The webpage is available in both Arabic and English, with the direction changing based on the selected language. Here is a snippet of CSS code that I'm using: #na ...

Having difficulty retrieving the value from an input field, despite trying both text() and val() methods

I'm struggling to retrieve the value of an input field that a user enters and then use it in my code. I have attempted using both text() and val() to get the value from the input fields, but neither method seems to be working for me. If you have any ...

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

Insert a span element before an HTML input using JavaScript

On my webpage, there is an html input inside a div. Here is what it looks like: <input type="text" class="form-control" placeholder="Barcode" role="barcode"> Using JavaScript only, I am trying to add the following code into the DOM above it: <s ...

Animated collapse with margin effect in Material-UI

I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am ha ...

Insert a new row into a sortable table with paging functionality

I'm facing an issue where adding a row dynamically to a tablesorter table with a pager removes all other pages. I'm looking for a solution to either add the row without affecting other pages, or remove the pager from the table and revert it back ...

Does Blazorise support the Material .figure-is-16x16 class?

While Blazorise supports the .figure-is-16x16 class, I have noticed that when using it in Material, it does not work by default. I am curious if the Material version of Blazorise supports this class or if there is another related class available. Current ...

Why Electron is refusing to open a JSON file

Currently, I am attempting to populate filenames using JSON for the onclick='shell.openItem('filename') function. While the console.log(data[i].url) correctly displays the kmz files for each button, I encounter an error when clicking a butto ...

Moving from one section to the next within a web page

I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the ...

Learn how to refresh weather data based on a selected option value using Ajax POST requests

I have been attempting to retrieve weather information when the select value changes. I have referenced several posts, such as this one among others, but so far none have solved my issue. While it may appear straightforward, I am still struggling with it. ...