"Trouble with 3D hexagonal grid in CSS - unable to achieve desired display

In order to create a dynamic Hexagonal Grid using CSS, the objective is to automatically reorganize hexes in a circular or rectangular manner when a new div with a specific class (e.g. 'hexes') is added to the view.

Currently, there is a grid with numerous hexes organized in columns of 4 hex-boxes with some animations. Rows can be added to the columns, but it is not responsive or self-ordered.

Below is a snippet of the existing code:

body { background-color: #171d25; }

<!-- More CSS Code Here -->

If we want to display only half of the hexes, seven divs with the class 'column' would need to be removed. However, the hexes will not expand or center themselves.

An attempt was made here to enlarge the hexes and align them centrally, but it needs further refinement.

It has been suggested to utilize @media queries for responsiveness, which is a feature I have limited experience with. The goal is to make the grid responsive and dynamic, particularly for use with AngularJS by utilizing ng-repeat so that the number of options is unknown and they are displayed neatly. Additionally, there are plans to include functionalities like inserting an image in the middle of a hex, displaying an image over the name of the hex, and showcasing information with animations.

htmlcssangularjs

Answer №1

To achieve the desired layout, using media queries is currently the most viable solution. The approach involves determining the width of the hexagons, utilizing the :nth-child() selector to adjust every second row without wrapping the hexagons in rows. Instead, setting them as inline-block, and specifying breakpoints with media queries based on the hexagons' width. Modify the value inside :nth-child() as needed when the viewport width changes.

For example:

<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<span class="hex"></span>
<style>
  .hex{
    width:100px;
  }
  @media(min-width: 200px) and (max-width: 299px){
    .hex:nth-child(3n){
      margin-left:50px;
    }
  }
  @media(min-width: 300px) and (max-width: 399px){
    .hex:nth-child(5n+4){
      margin-left:50px;
    }
  }
  @media(min-width: 400px) and (max-width: 499px){
    .hex:nth-child(7n+5){
      margin-left:50px;
    }
  }
  @media(min-width: 500px) and (max-width: 599px){
    .hex:nth-child(9n+6){
      margin-left:50px;
    }
  }
</style>

The formula for this logic is:

for(i = 2; i < .hex(length); i++){
  @media(min-width: i * .hex(width) ) and (max-width: (i * 2 * .hex(width)) - 1){
    .hex:nth-child(((2*i)-1)n+(i+1)){
      margin-left:.hex(width)/2;
    }
  }
}

This method is effective for horizontal (pointy) hex grids but can be adjusted for vertical (flat) hex grids by tweaking the formula slightly.

Check out the fiddle here: https://jsfiddle.net/q2my8vcn/ (Some modifications have been made, still a work in progress, but it demonstrates the basic concept effectively.)

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

Is there a way to assign "label 3" with the identical percentage as "label 1" on this particular form?

I'm currently using Bootstrap 4 for my project. I want to adjust "label 3" to have the same width as "label 1," while keeping the input width and the rest of the page intact (as shown in the code). Is this possible to achieve? Thank you. https://i ...

cssformstwitter-bootstrapbootstrap-4

Angular JS allows for the display of text from a textarea upon clicking the submit button

Q] How can I display a single text message from a textarea upon clicking the submit button in angular-js? Here is the current code that I have: <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1 ...

javascriptjqueryhtmlangularjs

locomotory mesh decentralized sorting

I am attempting to implement in-browser sorting for my flexigrid. Currently, the grid is displaying data from a static XML file exactly how I want it, but the table itself does not sort because it is working off of local data. While researching solutions, ...

javascriptjqueryhtmlflexigrid

Differences between HTML viewports and media queries

For simple webpages, my general rule is to utilize viewport units as they provide a lot of flexibility to the website. However, when dealing with complex webpages, I usually opt for media queries. In some cases, especially intermediate ones, I find it ben ...

htmlcssmedia-queries

The A-frame inspector tool is not very useful within the Glitch platform

Just want to preface this by saying that I am completely new to both a-frame and Stack Overflow. Lately, I've been experimenting with A-frame templates similar to the one linked here: When I pull up the inspector for the example above (ctrl-alt-i), ...

htmlaframe

Insert straight lines between elements in an inline list

I am working on building a step progress bar using the HTML code below: .fa-check-circle { color: #5EB4FF; } .fa-circle { color: #CFD7E6; font-size: 14px; } .container { width: 100%; position: absolute; z-index: 1; margin-top: 20px; } . ...

htmlcssflexboxfont-awesome

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

javascripthtmldomsafaritypescript

CSS filter for Internet Explorer

Can this CSS class be made to work in Internet Explorer 11? .inactive { filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28); } I attempted to implement the SVG grayscale filter but it was unsuccessful, causing issu ...

cssinternet-explorer-11grayscalecss-filters

Thymeleaf causing Spring IO POST form to redirect to incorrect URL

One of the challenges I'm facing while coding a website is with a form for uploading files. Ideally, when accessing the URL http://localhost:8080/uploadRevision/{docId}, it should lead to http://localhost:8080/uploadRevisionLanding and then redirect b ...

javahtmlspringformsspring-mvc

Embed Text inside an HTML Canvas

As someone who is relatively new to working with html canvas, I am having a bit of trouble when it comes to containing text within the canvas area. Specifically, I am pulling text from a textarea and displaying it on the canvas, but it seems to stay as one ...

javascriptjqueryhtmlcanvas

An option instead of using a pop-up window

Currently, I have a PHP script and a small form that allows users to upload image files. The user can access this feature by clicking on a button on the parent HTML page, which opens up a Pop Up Window. I understand that not everyone is a fan of 'Pop ...

phpjavascripthtmlpopup

Tips for applying a linear gradient mask to div elements?

I'm attempting to create a fading effect on the edges of a div by using two overlay divs positioned absolutely on either side. My goal is to have the background of the page visible once the fade is complete, effectively masking the content of one div ...

htmlcssmasking

Layers of CSS images

Is there a way to create multiple layers for images on a webpage so they can move independently without affecting other elements? I attempted to use z-index, which did work, but it caused the page to increase in height. Additionally, when using jQuery.posi ...

cssimagelayer

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

cssnode.jsreactjssassnode-sass

Showing fetched data from Firebase in an Ionic 3 HTML file

Looking for assistance on how to display data retrieved from my firebase database in my HTML file. I need help with organizing the data, starting with displaying customer user's data. Eventually, I want to make it clickable and put the user's dat ...

htmlangularfirebaseionic-frameworkfirebase-realtime-database

AngularJS routing fails to function when viewing past actions

Currently, I am working on coding an Angular application and have completed setting up my app routing as shown below: AdminDashboard.config(['$routeProvider','$locationProvider',function($routeProvider, $locationProvider){ $rou ...

angularjs

Ways to attach an item using its lower point instead of its upper coordinate

I am currently working on a poker table project using React. As of now, I have player components that need to be strategically positioned around the table. https://i.sstatic.net/gX9Ij.png One challenge I'm facing is that when the screen attribute ch ...

javascripthtmlcssreactjs

What steps can be taken to enhance the responsiveness of this Bootstrap 4 code?

I've been trying to make this code more responsive, but I haven't found a suitable solution yet. When the browser window shrinks to mobile sizes, the list becomes too narrow and the picture/video items on the right end up small and aesthetically ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

The presence of concealed cells within an HTML table is leading to an increase in the

I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows ...

htmlcss

How to use jQuery to recursively assign numbered classes to groups of div elements

I am dynamically grouping a fixed number of divs from an array (e.g. 4 in each group). The total number of .item divs retrieved from the array is uncertain... I need to recursively assign the same class to these groups of wrapped divs: <div class="wrap ...

jqueryhtmlclassaddition